测试 API-React.Children&React.cloneElement()

在尝试自己写一个高仿 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);
};

结果