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

Redux を使用せずに React で親の状態を更新する

多くの開発者は、ネストされたコンポーネント間で状態を通信するという課題に直面しています。一般的なシナリオは、子コンポーネントが上位レベルの親コンポーネントの状態を更新する必要がある場合に発生します。 React は props が不変であると規定しているため、これは問題になります。

次のコンポーネント構造を考えてみましょう:

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

このシナリオでは、コンポーネント 3 はコンポーネント 5 に保存されている状態にアクセスする必要があります。コンポーネント 5 の状態をプロップとしてコンポーネント 1 に渡し、それを他のコンポーネントに転送するのが直感的です。ただし、React の不変性ルールにより、このアプローチは禁止されています。

この問題に対する 1 つの解決策は、親コンポーネントによって提供される関数を使用して子-親通信を実装することです。次のコード スニペットを考えてみましょう:

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

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

この例では、親コンポーネントによって提供されるハンドラー関数が prop として子コンポーネントに渡されます。子コンポーネントのボタンがクリックされると、ハンドラー関数が呼び出され、親コンポーネントの状態が更新されます。

このソリューションでは、コンポーネント間の論理関係を確保するためにコンポーネント階層を再構築する必要があることに注意することが重要です。この例では、コンポーネント 5 とコンポーネント 3 は直接関連していない可能性があります。したがって、状態を効果的に管理できるように、それらを包含する新しいコンポーネントを作成する必要がある場合があります。

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