React 状态更改不会重新渲染克隆 children

Question

我有一个有状态组件 Form。在构造函数中，我创建状态，然后迭代组件 children。我克隆目标 children 并使用

添加道具

 React.cloneElement(x, {data: modelProperty});

其中 modelProperty 是一个 object，上面有一段 this.state。由于克隆，我最终得到了 this.props.children 的另一个实例。因此，在渲染中，我渲染了我的 children 新系列，这些 parents this.state.

装饰了它们

我希望他会在 state 和 children 之间创建一个绑定，这样当 state 改变时，受影响的 children 会被重新渲染。但是，虽然 parent 组件 ( Form ) 会重新呈现，但受状态更改影响的 children 不会 re-render.

这可能有点令人困惑，所以我将 post 一些代码。

constructor(props) {
  super(props);

  this.state = {
    fields: props.fields,
    formIsValid: true
  };
  this.newChildren = decorateInputs(this.props.children, this.state.fields);
}

然后

const decorateInput = (children, fields) => {
  return React.Children.map(children, x => {
    if(!x.props){ return x; }
    if (x.props.frfProperty) {
      var field = fields.filter(f => f.name === x.props.frfProperty)[0];
      if (!field) {
        throw new Error(`No property on model with name: ${x.frfProperty}!`)
      }
      return React.cloneElement(x, {data: field});
    }

    var clonedItems = decorateInput(x.props.children, fields);
    return React.cloneElement(x, {children: clonedItems});
  })
};

export default decorateInput;

然后

render() {
  return (<form onSubmit={this.onSubmitHandler.bind(this)} >
    {this.newChildren}
  </form>)
}

现在一个快速修复方法是在渲染方法中进行装饰，但这会再次渲染所有 child 组件，而不仅仅是状态发生变化的组件。

我的基本问题是为什么 re-render 行为被破坏，或者没有出现在克隆的 children 上。

最后，我知道还有其他可行的模式。我的问题是关于这样做的机制。也就是说，我知道 Redux，我知道我可以为提供给消费者的 children 提供自己的包装器。

Answer 1

您提到的绑定不会自动发生。
我认为将装饰调用放入 componentWillUpdate() 回调以及 .

应该就足够了

componentWillUpdate(nextProps, nextState){
 this.newChildren = decorateInputs(nextProps.children, nextState.fields);
}

阅读更多关于 compontent lifecycle.

React 状态更改不会重新渲染克隆 children

React state change doesn't rerender cloned children

recursion

state

children

reactjs