关于react.js:测试-APIReactChildrenReactcloneElement

5次阅读

共计 1520 个字符，预计需要花费 4 分钟才能阅读完成。

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

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)`

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

正文完