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