react EventBus事件总线传参

Jim-zf

已于 2023-01-13 16:16:39 修改

阅读量796

点赞数 2

文章标签： react.js 前端前端框架 reactjs

于 2023-01-04 14:33:41 首次发布

本文链接：https://blog.csdn.net/weixin_46600931/article/details/128547715

版权

文章介绍了如何利用Node的events模块创建一个EventBus，作为全局事件仓库，实现React组件间的通信。通过发布/订阅模式，兄弟组件可以互相传递数据，同时强调了在卸载组件时需要移除监听器以防止内存泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可以利用 node 的 api events

创建 utils.js 作为事件总线
EventBus相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件
它的工作原理是发布/订阅方法，通常称为 Pub/Sub 。

根目录新建 eventBus.ts

import { EventEmitter } from 'events';

const eventBus = new EventEmitter();

export default eventBus;

兄弟组件1 接受参数

import React,{ useEffect, useState} from "react";


import eventBus from '@/eventBus'

const Child = () => {

    const [myParams, setMyParams] = useState(null);

    useEffect(() => {
        eventBus.on('myParams', (value) => setMyParams(value));
		return () => {
			// 记得不使用此组件的时候要关闭监听，避免再次进入的时候再次创建一个监听事件，如果如此往复多次，就会创建很多监听事件，这是一种灾难
			eventBus.off('myParams'，（）=> setMyParams(null))
		}
    }, [])

    return (
        <div className="child">
            <h3>这是兄弟1组件</h3>

            <p>这是我兄弟给我的数据：{myParams}</p>
        </div>
    )
}

export default Child;

兄弟组件2 传参

import React from "react";

import eventBus from '@/eventBus'

const Child1 = () => {


    const toSubChildDataFn = () => {
        eventBus.emit('myParams', '这是要给兄弟的数据！')
    };

    return (
        <div className="child" style={{backgroundColor: 'blue'}}>
            <h3>这是兄弟2组件</h3>
       
            <div className="setBtnStyle" onClick={() => toSubChildDataFn()}>给兄弟组件传递数据</div>
        </div>
    )
}

export default Child1;