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

Redux を使用せずに React で状態の更新を子から親に伝播する方法

React の一方向データ フロー モデルでは、親コンポーネントの更新で課題が発生することがよくあります。彼らの子孫からの状態。次のコンポーネント構造が存在するシナリオを考えてみましょう:

Component 1
    - Component 2
        - Component 4
            - Component 5
Component 3

目標は、コンポーネント 3 がコンポーネント 5 の状態に基づいてデータを表示することです。 props は不変であるため、コンポーネント 5 からコンポーネント 1 に状態を渡すことは実現できません。

代わりに、React はコールバック関数を使用した子と親の通信を通じてソリューションを提供します。次のコード スニペットは、これを実現する方法を示しています。

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>;
  }
}

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

この例では、親は props を介してコールバック関数 handler() を子コンポーネントに渡します。この関数は、子によって呼び出されると、親コンポーネントで状態の更新をトリガーし、状態の変更がコンポーネント ツリーに伝播できるようにします。

このアプローチは当面の課題に対処しますが、コンポーネント構造の再考が必要になる場合があります。 。指定されたシナリオでは、コンポーネント 5 と 3 には直接的な関係があるようには見えません。この問題を軽減するには、両方のコンポーネントの状態を管理し、props を通じてそれを伝播する上位レベルのコンポーネント内でそれらをラップすることを検討してください。これにより、よりモジュール化され保守しやすいソリューションが可能になります。

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