react当我们有两个完全不相关的组件想要通信时,就可以利用这种模式,其中一个组件负责订阅某个消息,而另一个元素则负责发送这个消息。使用Context配合

在nextjs项目中,发现两个组件没啥关系,例如一个是一直存在的头部组件,另一个是页面中的组件,当我点击头部组件中的特定按钮时,把数据传递到页面组件中,页面组件接受到canshu数据后在做其他操作,那么他们两个如何通讯,通过context配合观察者模式实现。

  1. 首先在其共同的祖先组件中使用context
    下面的代码文件是根路由组件Layout.js
    其中children就是根据路由渲染的对应的页面

    ....
    import {ConContext} from "../utils/test1";
    import EventBus from "../utils/test";
    const Layout = () => {
    <ConContext.Provider value={EventBus()}>


    {children}

    </ConContext.Provider>

    }
    export default Layout

test1.js

创建context

复制代码
import { createContext } from 'react';

export const ConContext = createContext(null);

test.js

使用 useEffect 包装下,否则会在服务端渲染,而服务端又没有浏览器对象,所以会报错,导致打包失败,下面代码中,注释的代码就会报找不到document,所以使用useEffect包装下创建了一个自定义hook勾子 useEvent,这个钩子创建一个变量用于接收EventBus这个类,为什么要在useEffect 创建EventBus呢,因为只有在useEffect中才能拿到浏览器对象,然后在返回变量。然后导出这个useEvent

复制代码
"use client"
import {useEffect, useState} from 'react'
// 使用 useEffect 包装下,否则会在服务端渲染,而服务端又没有浏览器对象,所以会报错,导致打包失败
const useEvent = () => {
  const [val, setVal] = useState('')
  useEffect(() => {

    class EventBus {
      constructor() {
          this.bus = document.createElement('fakeelement');
      }

      addEventListener(event, callback) {
          this.bus.addEventListener(event, callback);
      }

      removeEventListener(event, callback) {
          this.bus.removeEventListener(event, callback);
      }

      dispatchEvent(event, detail = {}){
          this.bus.dispatchEvent(new CustomEvent(event, { detail }));
      }
    }
    setVal(new EventBus)
  },[])
  return val
}

export default useEvent


// "use client"
// class EventBus {
//   constructor() {
//       this.bus = document.createElement('fakeelement');
//   }

//   addEventListener(event, callback) {
//       this.bus.addEventListener(event, callback);
//   }

//   removeEventListener(event, callback) {
//       this.bus.removeEventListener(event, callback);
//   }

//   dispatchEvent(event, detail = {}){
//       this.bus.dispatchEvent(new CustomEvent(event, { detail }));
//   }
// }

// export default new EventBus
  1. 在header中触发事件,
    header.js
    使用useContext接收数据

    import React, {useState, useContext} from 'react';
    const Header = () => {
    const EventBus = useContext(ConContext)
    // 点击按钮时触发
    const clickTab = (url) => {
    setOpenMenu(false)
    // 点击头部菜单切换轮播图开始
    // EventBus.dispatchEvent('myEvent', {log: 2})
    // 点击头部菜单切换轮播图结束
    push(url)
    }
    }
    export default Header

  2. 在对应的页面组件中接收myEvent这个自定义事件

    import React, { useEffect,useRef, useContext } from "react";
    import { ConContext } from '../../utils/test1';
    const Products = (props) => {
    const EventBus = useContext(ConContext)
    console.log(EventBus,'EventBus');
    const slider = useRef();
    const handleEvent = (e) => {
    slider.current.goTo(e.detail.log)
    }
    useEffect(() => {
    EventBus.addEventListener('myEvent', handleEvent)
    }, [EventBus]);
    }

    export default Products;

参考:10种React组件之间通信的方法

相关推荐
中微子32 分钟前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z41 分钟前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录1 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子1 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神1 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao1 小时前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
_一两风1 小时前
JS执行机制-event loop
javascript
止观止1 小时前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript
摆烂为不摆烂1 小时前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神1 小时前
cocos游戏开发中,如何制作一个空气墙
前端·javascript