javascript - 在子组件的状态之间共享父状态？

Question

学习 React，我正在构建一个简单的计算器。组件模型是:

- Calculator
  - Sliders (input[ref=cars])
  - Dashboard (p {this.state.cars})

Sliders 是带有一组输入的组件，应该通过父级 Calculator 状态传输到 Dashboard。

我的目标是使 Dashboard 中的状态值随着 Sliders 的输入组件的变化而变化。

var Calculator = React.createClass({
  getInitialState: function() {
    return {
      cars: 0
    };
  },
  render: function () {
    return (
      <div className="calculator">
        <Sliders
          cars={this.state.cars}
        />
        <Dashboard
          cars={this.state.cars}
        />
      </div>
    )
  }
});

var Dashboard = React.createClass({
  getInitialState:function () {
    return {
      cars: this.props.cars
    }
  },
  render: function () {
    return (
      <div>
        <h1>Dashboard</h1>
        <p>Cars: {this.state.cars}</p>
      </div>
    )
  }
})

var Sliders = React.createClass({
  getInitialState: function() {
    return {
      cars: this.props.cars
    };
  },
  handleInput: function () {
    var state = {
      cars: this.refs.cars.value
    }
    this.setState(state);
  },
  render: function () {
    return (
      <div className="sliders">
        <input type="text" ref="cars" onChange={this.handleInput} value={this.state.cars}/>
      </div>
    )
  }
})

据我所知，handleInput() 被触发，因此 Sliders 的状态已设置。但是，它不会作为“汽车”“转移”到父 Calculator 的状态。因此，Calculator 的状态未更新 => Dashboard 状态也未更新。

如何在 Sliders 和 Dashboard 之间共享 Calculator 的父状态？

我知道，在 SO 上有很多类似的问题，但是很难找到具体有用的案例，尤其是当您完全是 React 菜鸟的时候。所以，很抱歉重复了。

Answer 1

组件不共享状态。不过，一个组件的状态可以成为另一个组件的 props。

在你的情况下，cars 应该是 Calculator 和 Slide 的状态，Dashboard 应该只检索汽车 作为 Prop 。如果输入发生变化，Sliders 应该将变化通知给 Calculator，以便它可以更新其状态并重新呈现(这会导致 Sliders 和 计算器也要更新):

var Calculator = React.createClass({
  getInitialState: function() {
    return {
      cars: 0
    };
  },

  onUpdate: function (cars) {
    this.setState({cars});
  },

  render: function () {
    return (
      <div className="calculator">
        <Sliders
          cars={this.state.cars}
          onUpdate={this.onUpdate}
        />
        <Dashboard
          cars={this.state.cars}
        />
      </div>
    )
  }
});

var Dashboard = React.createClass({
  render: function () {
    return (
      <div>
        <h1>Dashboard</h1>
        <p>Cars: {this.props.cars}</p>
      </div>
    )
  }
})

var Sliders = React.createClass({
  handleInput: function (event) {
    this.props.onUpdate(event.target.value);
  },

  render: function () {
    return (
      <div className="sliders">
        <input type="text" ref="cars" onChange={this.handleInput} value={this.props.cars}/>
      </div>
    )
  }
})

尽可能少的组件应该有状态并且状态应该在树中尽可能高。另见 Props in getInitialState Is an Anti-Pattern