扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇文章和大家了解一下react中可不可以使用事件总线。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
创新互联服务项目包括莲都网站建设、莲都网站制作、莲都网页制作以及莲都网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,莲都网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到莲都省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
react中可以使用事件总线;react使用事件总线可以用于解决跨组件之间的事件传递,可以利用一个使用较多的库events来完成对应的操作,利用npm或者yarn可以安装events,语法为“npm install events”和“yarn add events”。
本教程操作环境: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(“事件名称”, 监听函数)
使用前需要先安装,下面两种方式任选一个
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 (); } 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 (); } } export default Person;这是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 (); } export default App;
以上就是react中可不可以使用事件总线的简略介绍,当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多,欢迎关注创新互联行业资讯频道哦!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流