有一类组件，充当了容器的作用，它定义了一种外层结构形式，然后你可以往里面塞任意的内容。
一般而言可以将代码通过组件属性传递到容器组件中。如下代码所示
class Card extends Component {
render () {
return (
<div className='card'>
<div className='card-content'>
{this.props.content}
</div>
</div>
)
}
}
ReactDOM.render(
<Card content={
<div>
<h2>React.js</h2>
<div>开源、免费、专业、简单</div>
订阅：<input />
</div>
} />,
document.getElementById('root')
)
但是这样写明显太丑。
React.js中，默认支持组件嵌套的写法，上面的代码就可以改造成
class Card extends Component {
render () {
return (
<div className='card'>
<div className='card-content'>
{this.props.content}
</div>
</div>
)
}
}
ReactDOM.render(
<Card>
<div>
<h2>React.js</h2>
<div>开源、免费、专业、简单</div>
订阅：<input />
</div>
</Card>,
document.getElementById('root')
)
在Card组件中，可以通过 props.children 获得嵌套属性
props.children 是一个数组
使用如下:
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>
)
}
}
