昇格ステータス

まず、BoilingVerdictという要素を作成します.素子はcelsius propを受け、摂氏温度を表し、水を沸騰させるのに十分な温度であるか否かを出力する.

function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>The water would boil.</p>;  }
  return <p>The water would not boil.</p>;}

次に、Calculatorという名前の構成部品を作成します.要素は、<input>をレンダリングし、温度を入力し、その値をthis.state.temperatureに保存することができる.
また、現在の入力値に対してBoilingVerdict要素もレンダリングされます.

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};  }

  handleChange(e) {
    this.setState({temperature: e.target.value});  }

  render() {
    const temperature = this.state.temperature;    return (
      <fieldset>
        <legend>Enter temperature in Celsius:</legend>
        <input value={temperature} onChange={this.handleChange} />        <BoilingVerdict celsius={parseFloat(temperature)} />      
      </fieldset>
    );
  }
}

Calculatorを2つの独立した温度入力フィールドをレンダリングするように変更できます.

class Calculator extends React.Component {
  render() {
    return (
      <div>
        <TemperatureInput scale="c" /><TemperatureInput scale="f" />      
      </div>
    );
  }
}

現在、2つのTemperatureInput要素は、それぞれの状態とは独立して、それぞれの入力値を記憶している.

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};  }

  handleChange(e) {
    this.setState({temperature: e.target.value});  }

  render() {
    const temperature = this.state.temperature;    // ...

ただし、2つの入力値が同期していることを望んでいます.摂氏入力値を変更すると、摂氏入力値も変換後の温度を反映する必要があります.逆も同様です.
reactでstateを共有することは、stateを所望の素子間で最も近い共通の親に昇格させることによって実現することができる.この方法を「リフト状態」と呼ぶ.次に、TemperatureInputの値をCalculatorに移動し、Calculatorがそれぞれ所有している地域状態をクリアするのではなく、TemperatureInputに移動します.Calculatorが共有されている場合、構成部品は2つの入力フィールドの現在の温度の「真のソース」です.「これにより、2つの入力フィールド間の値が一致します.2つのTemperatureInput要素のpropsは同じ親this.state.temperatureから来ているため、2つの入力フィールドは常に同期されます.
それがどのように働いているのかを順番に見てみましょう.
まず、this.props.temperature要素をthis.props.temperatureに置き換えます.現在、Calculatorが存在すると仮定している.その後、temperatureからこの値を渡す必要があります.

 render() {
    // Before: const temperature = this.state.temperature;
    const temperature = this.props.temperature;    // ...

propsは読み取り専用ですです.TemperatureInputが地域状態である場合、this.setState()のtemperatureを呼び出すだけで値を変更できます.しかし、TemperatureInputは親からpropに渡されるため、<input>はその値を制御できない.
Reactは通常、構成部品を「制御可能」にすることによってこの問題を解決する.DOM valueがonChangeおよびTemperatureInput propを提供する方法と同様に、カスタマイズされたtemperatureは、両親のonTemperatureChangeおよびCalculatorから入手することもできる.TemperatureInputで温度を更新する場合は、this.props.onTemperatureChangeを呼び出すことができます.