Reactで子コンポーネントから親コンポーネントの状態を更新するにはどうすればよいですか?

React のコールバック関数を介して親の状態更新を渡す

ネストされた React コンポーネントを操作する場合、コンポーネントの状態を更新する必要がある場合があります。子コンポーネント内の親コンポーネント。プロパティは不変であるため、それらに値を直接割り当てることは現実的ではありません。

このようなシナリオでは、別のアプローチとして、親の状態を更新できるようにする関数を子コンポーネントに渡すことが含まれます。これは次のように実現できます。

// Parent Component
class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.handler = this.handler.bind(this);
  }

  handler() {
    this.setState({
      someVar: 'some value',
    });
  }

  render() {
    return <Child handler={this.handler} />;
  }
}

// Child Component
class Child extends React.Component {
  render() {
    return <Button onClick={this.props.handler} />;
  }
}

このメカニズムを通じて、子コンポーネントは props を通じて提供される関数を呼び出し、親の状態を更新できます。

ただし、次のことに注意することが重要です。コンポーネントの構造を再評価する必要がある場合があります。例のコンポーネント 5 と 3 には直接の関係がないようです。

考えられる解決策の 1 つは、コンポーネント 5 と 3 の両方をカプセル化する上位レベルのコンポーネントを導入することです。この親コンポーネントは、コンポーネント 5 とコンポーネント 3 に関連する状態を維持できます。両方の子コンポーネントを取得し、それを props を通じて渡します。

以上がReactで子コンポーネントから親コンポーネントの状態を更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。