在尝试本人写一个高仿 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.Children
render() {
return (
<form onValueChange={this.onValueChange}>
{children} // 原始子组件
{this.Children} // 克隆后的子组件
</form>
);
}
// 在内部调用this.test2这个ref
submit = () => {
console.log(this.test2);
};后果
发表回复