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

Question

使用antd的时候，用到Modal组件，如此使用：

return (

    <Modal someProps... >

        <p>...<p>

    </Modal>

)

好神奇！组件还可以包住其他组件。

毕竟以往我们做的组件都是类似这样单标签使用的：<Compon ...someProps... />

那么，如何构建，才能让组件在使用时候可以嵌套其他内容（包括其他组件），什么原理？

找了一些如何写组件的博客文章，都没有讲到这些，想去antd看Modal的源码，然而它引用了别的组件。实在看不出来。

谢谢！

Answer 1

class Main extends Component {&nbsp; &nbsp; constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { this.props.children }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }}

Answer 2

&nbsp; <Modal someProps... >&nbsp; &nbsp; &nbsp; &nbsp; <p>...<p>&nbsp; &nbsp; </Modal>在这段代码中，只有Modal是父元素，p是子元素。我这里不想用父子组件来解释，因为他们本质是React元素。实际上你在这里声明的是Modal元素，而在其中嵌套p这一写法可以看作是JSX的语法糖，用于更好地表现层次关系，本质上等同于：&nbsp; &nbsp; <Modal someProps... children={(&nbsp; &nbsp; &nbsp; &nbsp; <p>...</p>&nbsp; &nbsp; )&nbsp; &nbsp; } />所以Modal的render方法并不会自动展现p元素，需要手动将{ this.props.children }写在对应位置另外关于React的常见使用模式，可以阅读官方文档