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

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

....
import {ConContext} from "../utils/test1";
import EventBus from "../utils/test";
const Layout = () => {
<ConContext.Provider value={EventBus()}><Header />{children}<Footer></Footer></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

2. 在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

3. 在对应的页面组件中接收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组件之间通信的方法