Question

通常我的道具是字符串。正如所料，＆＃34;修改＆＃34;子级别的字符串不会直接修改状态，因为字符串是不可变的，只有引用会更改。但是，我最近传递了一个对象作为道具。修改该对象的成员将直接传递给该状态。我理解为什么会这样，我只是想知道这是否是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)。哪个好，因为现在不再重要的是该项是列的一部分，或者该列是一行，还是该行是根组件的一部分。唯一的另一种解决方案是将一堆关于项目模型的知识添加到根组件中，以便它可以尝试查找和替换正确的参数。

Answer 1

这就是你应该使用Flux商店的原因。父母可以观察商店。儿童通过行动修改商店。商店通知父母获得新的州。父母用新道具给孩子们重新奉献。

React.js修改子级别的道具

1 个答案: