React 嵌套

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

    import React from 'react'
    const Father = () => {
        return (
            <div>
                {/* 我们只要在父组件的jsx结构中以标签的形式写入子组件即可 */}
                <Son/>
            </div>
        )
    }
    const Son = () => {
        return (
            <div>
                这里是子组件内容
            </div>
        )
    }

React 组合

    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>
        }
    }

    import React from 'react'
    const Title = props => {
        return (
            <div> 这里是Title </div>
        )
    }
    const Content = props => {
        return (
            <div> 这里是Content </div>
        )
    }
    const Home = props => {
        return (
            <div> 这里是Home </div>
            {/* 2. 在Home组件中使用 this.props.children来接收 */}
            { this.porps.children }
        )
    }
    const App = props => {
        return (
            <div>
                <Home>
                    {/* 1. 我们将子组件放在Home组件的内容中 */}
                    <Title/>
                    <Content/>
                </Home>
            </div>
        )
    }