props.children 和容器类组件

有一类Component充当了容器的作用，它定义了一个背景，然后可以往里面塞任意的内容。这种结构在实际应用中很常见，如下面的Card组件：

image.png

组件本身是一个不带任何内容的容器，现在我们想往里面添加内容：

image.png

基础的方式可以这么写：

class Card extends Component {
  render () {
    return (
      

        

          {this.props.content}
        
      
    )
  }
}

ReactDOM.render(
  
      
props.children和容器类组件
       
开源、免费、专业、简单
      订阅：
    

} />, document.getElementById('root') )

通过Card组件传入一个content属性，这个属性可以传入任意的JSX结构。然后Card内部会通过{this.props.content}把内容渲染到页面上。

这样显得太丑了，如果Card中还有其他的组件，写起来就比较费劲。
通用写法：

class Card extends Component {
  render () {
    return (
      

        

          {this.props.children}
        
      
    )
  }
}

ReactDOM.render(
  
    
props.children和容器类组件
    
开源、免费、专业、简单
    订阅：
  ,
  document.getElementById('root')
)

把props.children打印出来，你可以看到它是个数组：

image.png

React.js 就是把我们嵌套的 JSX 元素一个个都放到数组当中，然后通过 props.children 传给了 Card。

这种嵌套的内容成为了 props.children 数组的机制使得我们编写组件变得非常的灵活，我们甚至可以在组件内部把数组中的 JSX 元素安置在不同的地方：

class Layout extends Component {
  render () {
    return (
      

        

          {this.props.children[0]}
        
        

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

这是一个两列布局组件，嵌套的 JSX 的第一个结构会成为侧边栏，第二个结构会成为内容栏，其余的结构都会被忽略。这样通过这个布局组件，就可以在各个地方高度复用我们的布局。