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中文网其他相关文章！