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会报错~

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!