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

Question

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

Answer 1

classMainextendsComponent{
constructor(props){
super(props);
}
render(){
return(
{this.props.children}
)
}
}
                            

Answer 2

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