React关于 this.props.children 总结
props
react是单向数据流,props是我们从上个组件传值传下来的集合,每一个props都应该对应的是从上个组件传过来的值。但是这里有一个例外,那就是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 Array
页面如下
<Test>hk-child</Test>
<Test/>
<Test>
<ul>
<li>111</li>
<li>222</li>
</ul>
</Test>
<Doit>
<span>hk-1</span>
<span>hk-2</span>
<span>hk-3</span>
</Doit>
class Test extends React.Component {
render() {
return (
<div className="red">
<h5>Hello hk</h5>
{ this.props.children }
</div>
)
}
}
class Doit extends React.Component{
render(){
return (
<ul>
{
React.Children.map(this.props.children, function (value,key) {
return <li>{value}----{key}</li>;
})
}
</ul>
);
}
};