如何构建可用于嵌套的React组件？

Question

使用antd的时候，用到Modal组件，如此使用：return (    <Modal someProps... >        <p>...<p>    </Modal>)好神奇！组件还可以包住其他组件。毕竟以往我们做的组件都是类似这样单标签使用的：<Compon ...someProps... />那么，如何构建，才能让组件在使用时候可以嵌套其他内容（包括其他组件），什么原理？找了一些如何写组件的博客文章，都没有讲到这些，想去antd看Modal的源码，然而它引用了别的组件。实在看不出来。谢谢！

Answer 1

class Main extends Component {

    constructor(props) {

        super(props);

    }

    render() {

        return (

            <div>

                { this.props.children }

            </div>

        )    

    }

}

Answer 2

  <Modal someProps... >

        <p>...<p>

    </Modal>

在这段代码中，只有Modal是父元素，p是子元素。我这里不想用父子组件来解释，因为他们本质是React元素。

实际上你在这里声明的是Modal元素，而在其中嵌套p这一写法可以看作是JSX的语法糖，用于更好地表现层次关系，本质上等同于：

    <Modal someProps... children={(

        <p>...</p>

    )

    } />

所以Modal的render方法并不会自动展现p元素，需要手动将{ this.props.children }写在对应位置

另外关于React的常见使用模式，可以阅读官方文档