Question

我正在创建一个组件来验证表单，该计划是要具有一个功能，该功能可以检查“必需”元素以向其添加其他道具。

我当前正在做的是使用这样的新属性克隆元素

cloneChildren(children, validate) {
    const result = {
        children: [],
        errors: [],
        status: true
    };
    children.forEach(child => {
        const options = {
        };
        if (this.willValidate(child.props)) {
            options.error = null;
        }
        result.children.push(React.cloneElement(child, options));
    });
    return result;
}

我的渲染如下：

render() {
    const clones = this.cloneChildren(this.props.children);
    // this.setState({
    //     children: clones.children
    // })

    const children = clones.children;
    return children;
}

要使用它，我只是将孩子带给它

<Form>
   <Input required="true" value={this.state.name} />
   <Input required="true" value={this.state.age} />
</Form>

这有效，如果有验证错误或其他原因，我可以将道具放置在对象上。

但是，这带来了令人讨厌的副作用，我正在丢失对象的值引用，这意味着，如果对象以空值或特定值开头，则该值将保持该值且不会改变

如果我在对象上键入内容，它将重新渲染并将其值设置回克隆时的值。

是否存在克隆方法来保留对创建子代时最初通过的值（{this.state.value}）的引用？

请参阅问题的jsfiddle

https://jsfiddle.net/josesuero/ftce52u8/3/

Answer 1

是的。您正在用选项覆盖道具。在克隆之前，将选项保存到props中，还将当前值保存到oldValue中。像

React.cloneElement(child, Object.assign({}, this.props, { options: options, oldValue: this.props.value }));

如果创建codepen / jsfiddle，很乐意提供更多帮助。

React本机克隆元素丢失值参考

1 个答案: