在React中，EventBus或者可以理解为自定义事件系统，可以用于组件间通信。以下是一个简单的例子，展示了如何使用EventBus传递参数：
import React from 'react';
// 创建一个简单的Event Bus
const EventBus = {
listeners: {},
on(event, callback) {
this.listeners[event] = this.listeners[event] || [];
this.listeners[event].push(callback);
},
emit(event, ...args) {
if (this.listeners[event]) {
this.listeners[event].forEach(callback => callback(...args));
}
}
};
// 使用EventBus的组件
class ComponentA extends React.Component {
notifyB = (message) => {
EventBus.emit('ComponentAEvent', message);
};
render() {
return (
<div>
<button onClick={() => this.notifyB('Hello from Component A!')}>
Notify Component B
</button>
</div>
);
}
}
class ComponentB extends React.Component {
componentDidMount() {
EventBus.on('ComponentAEvent', this.handleEventFromA);
}
componentWillUnmount() {
EventBus.on('ComponentAEvent', this.handleEventFromA);
}
handleEventFromA = (message) => {
alert(`Event received in Component B with message: ${message}`);
};
render() {
return <div>Component B is listening for events</div>;
}
}
// 应用组件
const App = () => (
<>
<ComponentA />
<ComponentB />
</>
);
export default App;在这个例子中，我们定义了一个简单的EventBus对象，它有on方法用于监听事件，emit方法用于触发事件，并传递参数。ComponentA有一个按钮，当点击时，它会通过EventBus发送一个事件及消息给ComponentB。ComponentB在挂载时开始监听ComponentA发出的事件，并处理接收到的消息。