props.children 和容器类组件

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

image.png

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

image.png

基础的方式可以这么写：

class Card extends Component {
  render () {
    return (
      <div className='card'>
        <div className='card-content'>
          {this.props.content}
        </div>
      </div>
    )
  }
}

ReactDOM.render(
  <Card content={
    <div>
      <h2>props.children和容器类组件</h2>
       <div>开源、免费、专业、简单</div>
      订阅：<input />
    </div>
  } />,
  document.getElementById('root')
)

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

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

class Card extends Component {
  render () {
    return (
      <div className='card'>
        <div className='card-content'>
          {this.props.children}
        </div>
      </div>
    )
  }
}

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

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

image.png

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

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

class Layout extends Component {
  render () {
    return (
      <div className='two-cols-layout'>
        <div className='sidebar'>
          {this.props.children[0]}
        </div>
        <div className='main'>
          {this.props.children[1]}
        </div>
      </div>
    )
  }
}

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