功能背景
想要实现类似于vue的eventBus的功能,由一个组件通知其他一个或多个组件。应用场景:比如一个可视化大屏的界面,当筛选条件变化的时候,要同时通知到大屏中所有图表一起变化。(当然使用store也是可以的,eventbus就是相当于多了一个解决方案)
代码实现
eventBus.js
// eventbus.js
const eventBus = {};
const events = {};
eventBus.on = (eventName, callback) => {
if (!events[eventName]) {
events[eventName] = [];
}
events[eventName].push(callback);
};
eventBus.emit = (eventName, data) => {
if (!events[eventName]) {
return;
}
events[eventName].forEach((callback) => {
callback(data);
});
};
export default eventBus;
子组件
import { Button } from 'antd';
import React from 'react';
import { useEffect, useState,useRef } from 'react'
import eventBus from '@/utils/eventBus';
const SonComponent = ({ dialogVisible, updateVisible }) => {
const _visible = {
get() {
return dialogVisible;
},
set(val) {
//广播子组件的状态改变
updateVisible && updateVisible(val);
},
};
const ctrlChoosen = (event) => {
_visible.set(event.target.checked);
};
const closeVisible = () => {
_visible.set(false);
};
//这里实现eventBus的监听,监听父组件的传参
useEffect(() => {
eventBus.on('buttonClick', (val) => {
//do some thing
console.log('子组件监听到',val)
});
return () => {
eventBus.off('buttonClick');
};
}, []);
return (
<div>
<Button onClick={closeVisible}>子组件控制关闭</Button>
<br></br>
<input type="checkbox" checked={_visible.get()} onChange={ctrlChoosen} />
<label>子组件状态{_visible.get()?'开':'关'}</label>
</div>
);
};
export default SonComponent;
父组件
文章来源:https://www.toymoban.com/news/detail-513892.html
import SonComponent from './Son'
import eventBus from '@/utils/eventBus';
<h1>父子组件eventBus交互</h1>
<SonComponent dialogVisible={dialogVisible} updateVisible={subscribeVisible} />
<Button onClick={()=>{eventBus.emit('buttonClick', true)}}>EVENTBUS父组件控制打开</Button>
实际效果
两个子组件均监听到了
文章来源地址https://www.toymoban.com/news/detail-513892.html
到了这里,关于React V6实现类似与vue的eventBus的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!