[解決済み] Reactで親の状態を更新するにはどうしたらいいですか？

質問

私の構成は以下の通りです。

Component 1

 - |- Component 2


 - - |- Component 4


 - - -  |- Component 5

Component 3

Component 3 は、Component 5 の状態に応じて、何らかのデータを表示する必要があります。

propsはimmutableなので、単純にComponent 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} />
  }
}

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

こうすることで、子はpropsで渡された関数の呼び出しで、親の状態を更新することができます。

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

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