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

React での子-親の状態管理

React では、コンポーネントの階層内で状態を維持するのは、特にコンポーネントの状態が不安定な場合に困難になることがあります。親コンポーネントは子から更新する必要があります。提供された例は、コンポーネント 3 がコンポーネント 5 の状態に基づいてデータを表示する必要がある親子コンポーネント構造を示しています。

プロパティは通常不変ですが、これは子から親の状態を更新することが不可能であることを意味するものではありません。これを実現する方法は次のとおりです。

状態設定関数を props として親から子に渡します。これにより、呼び出されたときに子が親の状態を更新できるようになります。

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

この例では、子は親からハンドラー関数にアクセスできます。子内のボタンがクリックされると、ハンドラーが呼び出され、親の状態が更新されます。

ただし、コンポーネントの構造を考慮することが重要です。あなたの場合、コンポーネント 5 と 3 は直接関係しません。これに対処するには、コンポーネント 1 と 3 の両方の状態をカプセル化する上位レベルのコンポーネントを導入できます。この中間コンポーネントは、必要な props を下位レベルのコンポーネントに提供します。

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