react学习之理解props.children

对于props.children, 官方文档是这样解释的

props.children is available on every component. It contains the content between the opening and closing tags of a component

也就是每个组件都有一个props.children属性,通过这个可以方便地拿到内部的元素, 假设我们有一个Container组件,我们希望将元素渲染到其内部

class Container extends Component {
  render () {
    return (
      

        

          { this.props.content }
        
      
    )
  }
}

我们可以通过content传入JSX的方式进行调用

			
this is paragraph 1
			
this is paragraph 2 
		

}>

然而这种方式还是台繁琐, 我们希望的是直接在Container组件内部书写JSX,并且可以成功被外部渲染,比如像下面这样

		

			
this is paragraph 1
			
this is paragraph 2 
		

使用props.children我们可以这样定义Container组件

class Container extends Component {
  render () {
    return (
      

        

          { this.props.children }
        
      
    )
  }
}

由于prop.children是一个数组,所以我们可以通过[index]的方式拿到需要的元素

       

       			
{ this.props.children[0] } 
       			
{ this.props.children[1] } 
       
 

react还提供了一系列操作props.children的方法, 定义在src/react/ReactComponent.js中,可以看到react实际上暴露了五个方法forEach, map,
count, only, toArray, 不过一般比较少用

export {
  forEachChildren as forEach,
  mapChildren as map,
  countChildren as count,
  onlyChild as only,
  toArray,
};

比如map方法, ChildrenDemo中的三个return语句分别会返回不同的子节点

class App extends React.Component {
   render() {
     return (
       
         1
         2
       
     )
   }
}

function ChildrenDemo(props) {
   // return props.children // 1, 2
  // return React.Children.map(props.children, c => [c, c]) // 1,1,2,2
  return React.Children.map(props.children, c => [c,[c, c]]) //1,1,1,2,2,2
}
ReactDOM.render(
  , 
  document.querySelector('#root'))