使用事件总线在React应用中通过按钮点击事件进行跨组件通信

以下是一个简单的示例代码，演示如何使用事件总线在React应用中通过按钮点击事件进行跨组件通信：

1. 创建一个事件总线文件eventBus.js，并在其中创建一个事件总线对象并导出它。

```jsx
// eventBus.js
import { EventEmitter } from 'events';
const eventBus = new EventEmitter();
export default eventBus;
```

2. 创建一个包含按钮的组件ButtonComponent，当按钮被点击时通过事件总线发送一个事件。

```jsx
import React from 'react';
import eventBus from './eventBus';

function ButtonComponent() {
  const handleClick = () => {
    eventBus.emit('buttonClicked');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default ButtonComponent;
```

3. 创建另一个组件OtherComponent，通过事件总线监听按钮点击事件，并在事件触发时执行相应的逻辑。

```jsx
import React, { useEffect } from 'react';
import eventBus from './eventBus';

function OtherComponent() {
  useEffect(() => {
    const handleButtonClicked = () => {
      console.log('Button clicked in OtherComponent!');
    };

    eventBus.on('buttonClicked', handleButtonClicked);

    return () => {
      eventBus.removeListener('buttonClicked', handleButtonClicked);
    };
  }, []);

  return <div>Other Component</div>;
}

export default OtherComponent;
```

4. 在App组件中将ButtonComponent和OtherComponent组件渲染出来。

```jsx
import React from 'react';
import ButtonComponent from './ButtonComponent';
import OtherComponent from './OtherComponent';

function App() {
  return (
    <div>
      <ButtonComponent />
      <OtherComponent />
    </div>
  );
}

export default App;