React 中的组件间通信
在 React 中，跨多个组件维护状态可能具有挑战性。以下是如何促进相关组件之间的通信：
场景＃1：过滤器作为列表的子级
将处理程序从父级（列表）传递给子级（过滤器）。当过滤器发生变化时，Filters 中的处理程序会调用父级的方法来更新状态并触发 List 中的重新渲染。
场景 #2：Filters 和 List 的公共父级
引入一个委托通信的父组件。父级将处理程序传递给过滤器，并在过滤器更改时更新过滤器和列表的状态。
场景 #3：全局事件系统
对于没有父子关系，考虑使用全局事件系统。定义一个事件名称，例如“filterUpdated”，并在 Filters 和 List 组件中订阅它。过滤器更改时，触发事件，该事件将通知任何订阅的组件相应地更新其状态。
示例：
// Global events file
export const myEmitter = new EventEmitter();
// Filters component
componentDidMount() {
myEmitter.on('filterUpdated', this.handleFilterUpdate);
}
handleFilterChange() {
// Emit event and pass new filter value
myEmitter.emit('filterUpdated', newFilterValue);
}
// List component
componentDidMount() {
myEmitter.on('filterUpdated', this.handleFilterUpdate);
}
handleFilterUpdate(newFilterValue) {
// Update state
this.setState({ filterValue: newFilterValue });
}以上是如何有效管理React中组件间的通信？的详细内容。更多信息请关注PHP中文网其他相关文章！
