在尝试本人写一个高仿 Antd 的 Form 表单组件的时候，应用了React.Children 来遍历子组件，并通过 React.cloneElement() 来给子组件注入 onChange 函数和 value props ，过后只是简略的应用了，这里做一个记录。
React.Children
React.Children提供了用于解决this.props.children不通明数据结构的实用办法。(引自react官网)
其中次要分为一下几个性能api：map、forEach、count、only、toArray。
| 名称 | 性能 | 函数 |
|---|---|---|
| map | 和es6的map函数相似，此处用于遍历所有子组件，依据函数来进行批改或其余操作，会返回一个新的子组件数组 | React.Children.map(children,(child)=>{console.log(child)}) |
| forEach | 和es6的forEach函数相似，此处用于遍历所有子组件，依据函数来进行批改或其余操作，然而不会返回新的数组 | React.Children.forEach(children,(child)=>{console.log(child)}) |
| count | 获取以后children的元素数量 | React.Children.count(children) |
| only | 当children只有有1个元素时，返回它，否则就返回异样 | React.Children.only(children) |
| toArray | 开展简单的children元素构造，相似于展平树，并给所有元素赋新的key值 | React.Children.toArray(children) |
React.cloneElement
该 API 次要作用就是克隆一个元素，并返回一个新的元素，并且咱们能够对克隆的元素进行批改注入新的 props、children，函数如下：
let newChild = React.cloneElement(child,[props],[...children])此外，原始子组件中的 ref 将被迁徙至新的克隆子组件上，原始的组件将会失去该 ref ，具体成果如下：
代码
// 创立一个ref对象this.test2 = React.createRef();// 将ref通过回调的模式传递给子组件<Item label={"账号"} name={"username"} inRef={(el) => (this.test2 = el)}> <Input /></Item>// 此时进入了Item组件外部// 向子组件Input注入默认值以及onChange事件this.Children = React.Children.map(children, (child) => { param[child.props.name] = ""; let key = child.props.name; return React.cloneElement(child, { onChange: this.changeInput, defaultValue: this.state[key], value: this.state[key], }); //这次咱们通过React.cloneElement增加属性});// 在Item组件的render中别离调用原始的children和新的this.Childrenrender() { return ( <form onValueChange={this.onValueChange}> {children} // 原始子组件 {this.Children} // 克隆后的子组件 </form> );}// 在内部调用this.test2这个refsubmit = () => { console.log(this.test2);};