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中文網其他相關文章！
