首页 > 代码库 > 五.this.props.chlidren
五.this.props.chlidren
this.props 对象属性与组件属性一一对应，但是有一个例外。就是this.props.chlidren属性。他表示组件里所有的子节点。
<!DOCTYPE html>
<html>
<head>
<script src="http://www.mamicode.com/js/react.js"></script>
<script src="http://www.mamicode.com/js/react-dom.js"></script>
<script src="http://www.mamicode.com/js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var NotList = React.createClass({
render:function(){
return (
<ol>
{
React.Children.map(this.props.children,function(child){
debugger;
return <li>{child}</li>
})
}
</ol>
)
}
})
ReactDOM.render(
<NotList>
<span>hello</span>
<span>world</span>
</NotList>,
document.getElementById("example")
)
</script>
</body>
</html>
上面代码NoteList组件有两个span节点。他们都通过this.props.children读取。
这里需注意 this.props.children的值有三种情况。
1.如果当前组件没有子节点。它就是underfine。
2.如果有一个子节点。它就是一个object。
3.如果有多个子节点。他就是一个array。
React提供一个工具方法来 React.Children来处理this.props.children.我们可以用React.Children.map()来遍历子节点。而不用担心 this.props.children 的数据类型是 undefined 还是 object
五.this.props.chlidren