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

全域事件系統

當元件位於單獨的根元件中時，您可以建立全域事件發射器或集中式狀態管理解決方案（例如 Redux）以促進通訊。元件訂閱特定事件或操作並做出相應回應。

以上是React 元件如何相互通訊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！