React.js 在子级别修改道具答案

【问题标题】：React.js Modifying Props at the Child LevelReact.js 在子级别修改道具
【发布时间】：2023-03-25 08:30:02
【问题描述】：

通常我的道具是字符串。正如预期的那样，在子级别“修改”字符串不会直接修改状态，因为字符串是不可变的，只有引用会改变。但是，我最近传递了一个对象作为道具。修改该对象的成员会直接传递给状态。我明白为什么会发生这种情况，我只是想知道这是否是 React.js 中的反模式？

例如：

/** @jsx React.DOM */
var ChildComponent = React.createClass({
  click: function(e) {
    this.props.xyz.subObject = "abc";
    this.props.onClick();
  },
  render: function() {
    return(
      <div onClick={this.click}>Click Me to Update Parent State</div>
    );
  }
});

var ParentComponent = React.createClass({
  getInitialState: function() { return { xyz: { subObject: "123" } }; },
  childClick: function() {
    this.setState(this.state);
  },
  render: function() {
    return(
      <div>
      <ChildComponent onClick={this.childClick} xyz={this.state.xyz} />
      <pre>AppState: <br /><br />{ JSON.stringify(this.state, 0, 2) }</pre>
      </div>
    );
  }
});

React.renderComponent(<ParentComponent />, document.body);

为什么有人想这样做？这一特殊发现是在对具有行、列和项的 GUI 进行原型设计时出现的。行可以通过拖动来排序。行包含可以排序或移动到其他行的列，同样通过拖动。列具有可以在相同或不同行中的列之间拖动的项目。最重要的是，项目也是组件，可以自行更新，最终将更新传递回根状态。

在项目级别更改道具对象成员，并触发一个链式事件来调用setState，与调用链式this.props.onEvent(rowId, colId, itemId, newItemProps) 一样有效。这很好，因为现在该项目是列的一部分，或者该列在一行中，或者该行是根组件的一部分不再重要。唯一的其他解决方案是向根组件添加大量关于项目模型的知识，以便它可以尝试查找和替换正确的参数。

【问题讨论】：

标签： javascript design-patterns reactjs anti-patterns

【解决方案1】：

这就是您应该使用 Flux 商店的原因。父母可以观察商店。孩子们通过动作修改商店。商店通知父母获得新的状态。父母用新的道具重新渲染孩子。

【讨论】：