React this.props.children
this.props对象的属性与组件的属性一一对应,但是有一个例外,就是this.props.children
属性。它表示组件的所有子节点。
var NotesList = React.createClass({
render(){
return (
<ol>
{
React.Children.map(this.props.children,function(child){
return <li>{child}</li>;
})
}
</ol>
)
}
})
ReactDOM.render(
<NotesList>
<span>{hello}</span>
<span>{world}</span>
</NotesList>,
document.body
)
上面代码的NotesList
组件有两个span
子节点,他们都可以通过this.props.children
读取。
这里需要注意,this.props.children
的值有三种可能:如果当前组件没有子节点,它就是undefined
;如果有一个子节点,数据类型是Object
;如果有多个子节点,数据类型就是array
。所以,处理this.props.children
的时候要小心。
React提供一个工具方法React.Children
来处理this.props.children
。我们可以用React.Children.map
来遍历子节点,而不用担心this.props.children
的数据类型是undefined
还是object
。