☰

Reactで親の状態を更新するにはどうすればよいですか? 質問する

tag-icon • tag-icon javascript reactjs web-deployment
Reactで親の状態を更新するにはどうすればよいですか? 質問する

私の構造は次のようになります。

Component 1

 - |- Component 2


 - - |- Component 4


 - - -  |- Component 5

Component 3

コンポーネント 3 は、コンポーネント 5 の状態に応じていくつかのデータを表示する必要があります。

propsは不変なので、単にコンポーネント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}/ >
  }
}

この方法では、子は props で渡された関数の呼び出しによって親の状態を更新できます。

しかし、コンポーネント 5 と 3 は関連していないと理解しているため、コンポーネントの構造を再考する必要があります。

考えられる解決策の 1 つは、コンポーネント 1 と 3 の両方の状態を含む上位レベルのコンポーネントでそれらをラップすることです。このコンポーネントは、props を通じて下位レベルの状態を設定します。

おすすめ記事