所属分类：web前端开发
react中可以使用事件总线；react使用事件总线可以用于解决跨组件之间的事件传递，可以利用一个使用较多的库events来完成对应的操作，利用npm或者yarn可以安装events，语法为“npm install events”和“yarn add events”。
前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。
react 事件总线解决的问题：跨组件之间的事件传递
在React开发中如果有跨组件之间的事件传递，应该如何操作？
A、在Vue中我们可以通过Vue的实例，快速实现一个事件总线（EventBus），来完成操作；
B、在React中可以依赖一个使用较多的库 events 来完成对应的操作；
如何实现
借助第三方库 events来实现
常见的 api
创建EventEmitter对象：eventBus对象
发出事件：eventBus.emit(“事件名称”, 参数列表)
监听事件：eventBus.addListener(“事件名称”, 监听函数)
移除事件：eventBus.removeListener(“事件名称”, 监听函数)
使用前需要先安装，下面两种方式任选一个
微博登录
QQ登录npm install events
yarn add events
登录后复制events实践：
首先新建一个文件QcEventEmitter.js，文件内容如下：
import { EventEmitter } from 'events'
class QcEventEmitter extends EventEmitter {};
export default new QcEventEmitter();登录后复制下面将实现EventTest组件向Person组件传递事件：
EventTest文件内容
A、EventTest组件中引入QcEventEmitter
B、在点击事件中通过QcEventEmitter.emit来发送事件
import React, { Component } from 'react';
import QcEventEmitter from 'common/utils/QcEventEmitter'
class EventTest extends Component {
render() {
return (
<div>
<button onClick={e => this.btnCLick()}>测试event事件</button>
</div>
);
}
btnCLick(){
QcEventEmitter.emit('contextClick', 'Lucy', '99')
}
}登录后复制export default EventTest;
Person文件内容
A、Person组件中引入QcEventEmitter，
B、在componentDidMount中通过QcEventEmitter.addListener来监听事件，
C、在 componentWillUnmount中通过QcEventEmitter.removeListener移除对事件的监听
import React, { Component, useContext } from 'react';
import QcEventEmitter from 'common/utils/QcEventEmitter'
class Person extends Component {
componentDidMount(){
QcEventEmitter.addListener("contextClick", this.headerClick)
}
componentWillUnmount() {
QcEventEmitter.removeListener("contextClick", this.headerClick)
}
headerClick(name, age) {
console.log(name, age);
}
render() {
return (
<div>
<h2>这是Person子组件</h2>
</div>
);
}
}
export default Person;登录后复制在App.js文件中渲染EventTest组件和Person组件(Person组件渲染后，就可以监听EventTest发出的事件了，他们之间并不需要任何依赖)
import React from 'react';
import ContetTest from './pages/contenxt'
import Person from 'pages/contenxt/person'
function App() {
return (
<div className="App">
<ContetTest />
<Person />
</div>
);
}
export default App;登录后复制【相关推荐：javascript视频教程、web前端】
以上就是react中可以使用事件总线吗的详细内容，更多请关注zzsucai.com其它相关文章！
