React コンポーネントはどのように相互に通信するのでしょうか?

React コンポーネント間の通信

React では、あるコンポーネントのデータを別のコンポーネントの変更に基づいて更新する必要がある場合、コンポーネントの通信が重要になります。これには、コンポーネント間の関係に応じて、いくつかの方法があります。

親子通信

あるコンポーネントが別のコンポーネント内にネストされている場合、子コンポーネントは親から props を受け取ることができます。子コンポーネントが親を更新する必要がある場合、prop として渡されたコールバック関数を使用できます。

// Parent component
class Parent extends React.Component {
  handleFilterUpdate = (value) => {
    // Update the state to apply the filter.
    this.setState({ filter: value });
  };

  render() {
    return (
      <Child updateFilter={this.handleFilterUpdate} />
    );
  }
}

// Child component
class Child extends React.Component {
  handleFilterChange = () => {
    // Get the filter value and trigger the parent callback.
    const value = this.refs.filterInput.value;
    this.props.updateFilter(value);
  };

  render() {
    return (
      <input type="text" ref="filterInput" onChange={this.handleFilterChange} />
    );
  }
}

兄弟通信

コンポーネントが兄弟である場合、コンポーネントには直接的な親子関係。このような場合、上位コンポーネント (HOC) を使用して両方のコンポーネントをラップし、通信チャネルを提供できます。

// HOC
const withFilter = (WrappedComponent) => {
  class Wrapper extends React.Component {
    constructor(props) {
      super(props);
      this.state = { filter: '' };
    }

    handleFilterUpdate = (value) => {
      this.setState({ filter: value });
    };

    render() {
      return (
        <WrappedComponent
          filter={this.state.filter}
          updateFilter={this.handleFilterUpdate}
        />
      );
    }
  }

  return Wrapper;
};

// Child components
const Component1 = withFilter(({ filter }) => <p>Filter: {filter}</p>);
const Component2 = withFilter(({ updateFilter }) => (
  <input type="text" onChange={(e) => updateFilter(e.target.value)} />
));

Global Event System

コンポーネントが別のルート コンポーネントに存在する場合、グローバル イベント エミッターまたは集中状態管理ソリューション (Redux など) を作成して、通信を容易にすることができます。コンポーネントは特定のイベントまたはアクションをサブスクライブし、それに応じて応答します。

以上がReact コンポーネントはどのように相互に通信するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。