react组件的组合用法--this.props.childre

父子组件间的传值可以通过this.props.属性名 来操作，但是this.props.children的用法会有点不一样
这种用法是属于react中的组件的组合
组件的组合是指：将一个组件写在另一个组件的内容中，然后在外层组件中通过 this.props.children来接收内容中的组件， 效果上类似vue中的插槽

    import React from 'react'
    class Title extends React.Component{
        render (
            <div>
                <h3> 这里是title </h3>
            </div>
        )
    }
    class Content extends React.Component{
        render (
            <div>
                <h3> 这里是Content </h3>
            </div>
        )
    }
    class Home extends React.Component{
        render (
            <div>
                <h3> 这里是home </h3>
                {/* 2. 在Home组件中使用 this.props.children来接收 */}
                { this.porps.children }
            </div>
        )
    }
    class App extends React.Component{
        render () {
            <Home>
                {/* 1. 将子组件放在Home组件的内容中 */}
                <Title/>
                <Content/>
            </Home>
        }
    }

这和组件的嵌套用法不同 嵌套是子组件写在父组件中的render函数中的

 // 父组件定义如下：
    import React from 'react'
    class Father extends React.Component{
        render () {
            return <div>
                    {/* 我们只要在父组件的jsx结构中以标签的形式写入子组件即可 */}
                    <Son/>
                   </div>
        }
    }
    class Son extends React.Component{
        render () {
            return  <div> 这里是子组件内容 </div>
        }
    }