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组件之间通信的方法

相关推荐
xw527 分钟前
uni-app中v-if使用”异常”
前端·uni-app
!win !1 小时前
uni-app中v-if使用”异常”
前端·uni-app
IT_陈寒1 小时前
Java 性能优化:5个被低估的JVM参数让你的应用吞吐量提升50%
前端·人工智能·后端
南囝coding1 小时前
《独立开发者精选工具》第 018 期
前端·后端
小桥风满袖2 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花2 小时前
i18n国际语言化配置
前端
编程贝多芬2 小时前
Promise 的场景和最佳实践
前端·javascript
Asort2 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio2 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗2 小时前
JS的对象属性存储器
前端