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

页面如下

 hk-child
 
 
   

     
111
     
222
   
 
 
   hk-1
   hk-2
   hk-3
 
 
class Test extends React.Component {
  render() {
    return (
      

        
Hello hk
        { this.props.children }
      
    )
  }
}

class Doit extends React.Component{
  render(){
     return (
          

           {
                React.Children.map(this.props.children, function (value,key) {
                       return 
{value}----{key}
;
                })
            }
          
     );
  }
};