有一类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 的第一个结构会成为侧边栏，第二个结构会成为内容栏，其余的结构都会被忽略。这样通过这个布局组件，就可以在各个地方高度复用我们的布局。
