乐趣区

关于react.js:测试-APIReactChildrenReactcloneElement

在尝试本人写一个高仿 AntdForm 表单组件的时候,应用了React.Children 来遍历子组件,并通过 React.cloneElement() 来给子组件注入 onChange 函数和 value props,过后只是简略的应用了,这里做一个记录。

React.Children

React.Children 提供了用于解决 this.props.children 不通明数据结构的实用办法。(引自 react 官网)

其中次要分为一下几个性能 api:mapforEachcountonlytoArray

名称 性能 函数
map es6map函数相似,此处用于遍历所有子组件,依据函数来进行批改或其余操作,会返回 一个新的子组件数组 React.Children.map(children,(child)=>{console.log(child)})
forEach es6forEach函数相似,此处用于遍历所有子组件,依据函数来进行批改或其余操作,然而 不会返回 新的数组 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 次要作用就是克隆一个元素,并返回一个新的元素,并且咱们能够对克隆的元素进行批改注入新的 propschildren,函数如下:

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);
};

后果

退出移动版