react EventBus事件总线传参

在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发出的事件，并处理接收到的消息。