React實戰之錯誤錦集

Warning

---

Warning: Unknown DOM property class. Did you mean className?

發生狀況
使用class設置element的類名時，如：

var Com=React.createClass({
    render:function(){
        return (
            <div class="com"></div>
        );
    }
});

正確使用方式

var Com=React.createClass({
    render:function(){
        return (
            <div className="com"></div>
        );
    }
});

Warning: Use the defaultValue or value props on <select> instead of setting selected on <option>.

發生狀況
使用selected屬性選中option標籤時，如：

var Com=React.createClass({
    render:function(){
        return (
            <select>
                <option value="1" selected={"1"==this.state.value}>男</option>
                <option value="2" selected={"1"==this.state.value}>女</option>
            </select>
        );
    }
});

正確使用方式：*

var Com=React.createClass({
    render:function(){
        return (
            <select value={this.state.value}>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
        );
    }
});

Error

---

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {type, className, onClick, children}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of XXX.

翻譯
暫無，英語很差。。。

發生狀況
1.遍歷this.props.children時發生，由於this.props.children的返回值的類型在不一樣狀況下是不同的，它的類型共有三種狀況：

• 若是當前組件沒有子節點，它就是 undefined；

• 若是有一個子節點，數據類型是 object；

• 若是有多個子節點，數據類型就是 array。

解決方法：
使用React.Children.toArray方法將this.props.children轉化成標準的數組格式，而後在進行遍歷操做：

var childs = React.Children.toArray(this.props.children);
childs.forEach(function(item){
    ...
});

Danger: Discarding unexpected node: <div>​XXX​</div>​

發生狀況
代碼中包含dangerouslySetInnerHTML={{__html: this.state.html}}相似的代碼時，而且使用這段代碼的標籤是某些只能包含特定標籤的標籤，有點繞。。。
看這個例子：

<input type="text" id="input" />
<br />
<button type="button" onclick="setHtml">設置HTML</button>
<br />
<div id="box"></div>

function setHtml(){
    var box=document.getElementById("box"),
        input=document.getElementById("input");
    ReactDOM.render(<Com html={input.value} />,box);
}

var Com=React.createClass({
    render:function(){
        return (
            <p className={this.props.className} dangerouslySetInnerHTML={{__html: this.props.html}}></p>
        );
    }
});

在input內輸入<span>123</span>,點擊按鈕後，可正常設置；
在input內輸入<div>123</div>,點擊按鈕後，代碼即報錯，仔細想一下就知道，其實<p>標籤內是不容許包含div標籤的，因此React會報錯~