ReactJS 中的组件如何相互交互？
在 ReactJS 中构建应用程序时，经常会遇到需要多个组件的场景交互和传达数据或事件。这可能会导致如何最好地促进这些交互的问题。
组件通信方法
方法的选择取决于组件的关系和层次结构：
场景 1：过滤器 -> List
在此场景中，Filters 组件是 List 组件的子组件。 List 组件可以将处理函数传递给 Filters 组件。当过滤器输入更改时，可以调用处理程序以使用新的过滤器值更新列表的状态。
场景 2：父级 ->过滤器和列表
当过滤器和列表都是共同父级的子级时，父级可以处理通信。它可以维护过滤器的状态并将最新值传递给过滤器和列表。
场景 3：独立组件
对于以下组件：由于缺乏父子关系，React 建议使用全局事件系统。这可以通过使用 componentDidMount() 方法添加事件监听器和使用 componentWillUnmount() 方法删除事件监听器来实现。
代码示例
场景1（过滤器->列表）
// Filters.js
handleChange = () => {
const value = this.input.value;
this.props.updateFilter(value);
};
// List.js
handleFilterChange = (value) => this.setState({ filter: value });
<Filters onChange={this.handleFilterChange} />场景 2（父级 -> 过滤器和列表）
// Parent.js
filterChange = (value) => this.setState({ filter: value });
// Filters.js
render() {
const { filter, updateFilter } = this.props;
return <input value={filter} onChange={updateFilter} />;
}
// List.js
render() {
const { filter, items } = this.props;
return <ul>{items.filter(item => item.includes(filter)).map(...)}</ul>;
}场景 3（全局事件系统）
// GlobalEventEmitter.js
events = {};
on = (event, cb) => events[event] ? events[event].push(cb) : events[event] = [cb];
emit = (event, ...args) => events[event] ? events[event].forEach(cb => cb(...args)) : null;
// ComponentA.js
emit("customEvent", { ... });
componentDidMount() {
on("customEvent", (payload) => this.setState({ ...payload }));
}
// ComponentB.js
emit("customEvent", { ... });
componentDidMount() {
on("customEvent", (payload) => this.setState({ ...payload }));
}以上是ReactJS 组件如何有效地相互通信？的详细内容。更多信息请关注PHP中文网其他相关文章！
