React.js在子级修改道具

Question

Normally my props are strings. As expected, "modifying" strings at the child level does not modify the state directly because strings are immutable and only references will change. However, I recently passed an object as a prop. Modifying the members of that object are passed up directly to the state. I understand why this happens, I'm just wondering if this is an anti-pattern in React.js?

For example:

/** @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);

Why would anybody want to do this? This particular discovery came while prototyping a GUI that has rows, columns, and items. Rows can be ordered by dragging them. Rows contain columns that can be ordered or moved into other rows, again by dragging. Columns have items that can be dragged between columns in the same or different rows. On top of all this, items are components too and can update themselves, eventually passing that update back up to the root state.

Changing prop object members at the item level, and firing a chained event to call setState , worked as well as calling the chained this.props.onEvent(rowId, colId, itemId, newItemProps) . Which is good, because now it no longer matters that the item is part of a column, or that the column is in a row, or that the row is part of the root component. The only other solution was to add a bunch of knowledge about the item model to the root component so it could try to find and replace the correct params.

Answer 1

This is why you should use Flux stores. Stores can be observed by parents. Children modify the stores through actions. The stores notify the parents to get new state. The parents rerender the children with new props.