React的组件封装新规范，应该以HTML的结构树进行填写

近一年的code review的工作中，需要制作一些高可用的业务场景组件。那我的首要工作当然也是要写高可用的组件库啦。

在这一段的工作里面，我发现一个问题，像我们这些中小企业来讲一般都是基于antd的组件进行开发。当然react也给出了一套自己的组件封装规范。

可重用的组件是什么样的？

我们以antd的modal组件为例子。按照antd的案例代码来演示。我们平时写代码的时候是怎么阅读的呢？大概是如下情况。

<Modal 
    visible={visible} 
    title="Title" 
    onOk={this.handleOk} 
    onCancel={this.handleCancel} 
    footer={[ 
    <Button key="back" onClick={this.handleCancel}> Return </Button>,
    <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}> Submit </Button>, 
    <Button key="link" href="https://google.com" type="primary" loading={loading} onClick={this.handleOk} > Search on Google </Button>, ]} > 
    <p>Some contents...</p>
    <p>Some contents...</p> 
    <p>Some contents...</p> 
    <p>Some contents...</p>
    <p>Some contents...</p> 
</Modal> 

我们在进行抽象组件的时候，把很多的行为，使用参数的形式进行了传递，从而进行功能上的多态行为实现。

这么做的问题是什么呢？

有没有发现我们在阅读代码的时候，这种写法有点变扭？我吗需要去看一个title的结构的时候是不知道这个组件是长什么样子的。或者footer的这些样子我们也需要进行文档的api查阅后才知道它是用来做什么！我们只有一个children阅读起来比较可观。

在这里我比较期待