外部ライブラリを使用せずに、React で子コンポーネントが親の状態を更新するにはどうすればよいですか?

React での親子状態管理

React アプリケーションでは、子コンポーネントが親の状態を更新する必要があるシナリオに遭遇することがあります。プロパティはデフォルトでは不変ですが、Redux などの外部ライブラリを使用せずにこの機能を実現する方法があります。

解決策

子と親の通信には、プロパティとして渡されるコールバック関数を利用できます。親から子へ。以下に例を示します:

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 として子に渡します。
• 子のボタンがクリックされたとき
• Parent のハンドラー関数は、内の someVar 状態を更新します。 Parent.

代替ソリューション

無関係なコンポーネント (例: コンポーネント 5 とコンポーネント 3) を扱っている場合は、コンポーネントを再構成できます:

• 両方のコンポーネント (コンポーネント 1 とコンポーネント) の状態を含む新しい上位レベルのコンポーネントを作成します。 3).
• 上位レベルのコンポーネントから下位レベルのコンポーネントに props として状態を渡します。

このアプローチにより、依存関係のないコンポーネント間の状態を効果的に管理できます。中間状態共有メカニズム。

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