容器类组件和props.children

有一类组件，充当了容器的作用，它定义了一种外层结构形式，然后你可以往里面塞任意的内容。

因此我们可以使用容器组件完成布局，然后再通过props.children往里面填内容

eg. 使用Layout组件布局一个大盒子，里面装有左右两个盒子，再通过props.children[0]和props.children[1]填充左右两个盒子

/布局组件Layout

const Layout = (props) => {
    return (
        <div className="box">
            <div className="left">
                {props.children[0]}
            </div>
            <div className="right">
                {
                    props.children[1]
                }
            </div>
        </div>
    )

}


//样式
.box {
    margin: 100px;
}

.left {
    float: left;
    width: 200px;
    background-color: blue;
}

.right {
    float: left;
    width: 200px;
    background-color: red;
}

/传内容的组件App.js

const App = () => {
    return (
        <Layout>
            <div>hahahahah</div>
            <div>heiheiheiheiheiheihei</div>
        </Layout>
    )
}

/通过渲染容器组件来渲染内容index.js

ReactDOM.render(<App />, document.getElementById('root'))

效果展示：

总结 ：容器组件Layout方便我们服用某种布局，相当于把一种布局封装起来！！