javascript - 在 React 中操作模型实例的正确方法是什么？

Question

所以我有一个 React 组件，它接受函数构造函数的实例(Car)。

该组件的工作是显示有关Car的信息，并根据Car的公共(public)接口(interface)(方法和属性)对其进行操作。

在下面的示例中，子组件应在按钮单击时添加意外事件。

问题:子级操作 Car 实例属性的正确方法是什么？根父级的状态存储对 Car 实例的引用，并且子级能够操作 Car 的属性(例如 .accidents )，但请参阅各种 onChange 示例，了解为什么我正在努力寻找正确的 React 方法来执行此操作。

我希望避免使用像 Flux 这样的严厉解决方案来存储此状态。

如有任何建议，我们将不胜感激!

function Car(name, color) {
  this.name = name;
  this.color = color;
  this.accidents = [];
}

const myCar = new Car('Ferrari', 'Red');
myCar.accidents.push('accident #1');


class Accident extends React.Component {
  handleButton1 = () => {
    const newAccident = 'accident type1 # ' + Math.floor(Math.random()*100);
    this.props.onChange1(newAccident);
  }

  handleButton2 = () => {
    const newAccident = 'accident type2 # ' + Math.floor(Math.random()*100);
    this.props.onChange2(newAccident);
  }

  handleButton3 = () => {
    const newAccident = 'accident type3 # ' + Math.floor(Math.random()*100);
    this.props.accidents.push(newAccident);
    this.props.onChange3();
  }

  handleButton4 = () => {
    const newAccident = 'accident type4 # ' + Math.floor(Math.random()*100);
    this.props.accidents.push(newAccident);
    // This circumvents React's state management, so the parent doesnt
    // rerender when its state changes.
  }

  render() {
    return (
      <div>
        <button onClick={this.handleButton1}>
          Add accident (onChange1)
        </button>
        <button onClick={this.handleButton2}>
          Add accident (onChange2)
        </button>
        <button onClick={this.handleButton3}>
          Add accident (onChange3)
        </button>
        <button onClick={this.handleButton4}>
          Add accident (option 4)
        </button>
        <ul>
          {this.props.accidents.map((a, i) => <li key={i}>{a}</li>)}
        </ul>
      </div>
    )
  }
}

class DisplayCard extends React.Component {
  state = {
    editingCar: this.props.car
  }

  // Push the new accident into state and set it with the same reference.
  onChange1 = (newAccident) => {
    this.state.editingCar.accidents.push(newAccident);
    // Is this semantically different than calling this.forceUpdate?
    this.setState({
      editingCar: this.state.editingCar,
    });
  }

  // Clone the existing state we want to update and explicitly set that new state
  onChange2 = (newAccident) => {
    const newAccidentList = _.cloneDeep(this.state.editingCar.accidents);
    newAccidentList.push(newAccident);

    // Setting our new accident list like this converts editingCar to a POJO
    // editingCar.name is lost because a deep merge does not happen.
    this.setState({
      editingCar: {
        accidents: newAccidentList
      },
    });
  }

  // Just force update - this.state.editingCar was manipulated by <Accident />.
  onChange3 = () => {
    this.forceUpdate();
  }

  render() {
    return (
      <div>
        <div>Car Name: {this.state.editingCar.name}</div>
        <Accident
          accidents={this.state.editingCar.accidents}
          onChange1={this.onChange1}
          onChange2={this.onChange2}
          onChange3={this.onChange3}
        />
     </div>
    );
  }
}

ReactDOM.render(
  <DisplayCard car={ myCar } />,
  document.getElementById('container')
);

如果你想玩的话也可以在 JSFiddle 上: https://jsfiddle.net/jamis0n003/fbkn5xdy/4/

编辑: React JS 文档建议使用forceUpdate 与“其他库”(例如 Backbone 模型)集成: https://reactjs.org/docs/integrating-with-other-libraries.html#using-backbone-models-in-react-components

Answer 1

当状态存储在父组件中并且子组件想要操作该状态时，父组件应该将回调函数传递给子组件。然后子进程调用回调通知父进程修改自己的状态。 child 应该永远修改 props，因为由于 JavaScript 中引用对象的方式，更改可能会产生意想不到的后果。

如果你想变得更奇特，你可以使用 Redux，它在最顶层的父组件中存储“全局”状态。所有子组件都会发出(或调度)操作，通知顶级父组件更新其状态，然后通过其 props 再次向下传递给所有子组件。