武义建设局网站,长沙网站建设多少钱,中小企业网站建设案例,安卓软件免费下载在nextjs项目中#xff0c;发现两个组件没啥关系#xff0c;例如一个是一直存在的头部组件#xff0c;另一个是页面中的组件#xff0c;当我点击头部组件中的特定按钮时#xff0c;把数据传递到页面组件中#xff0c;页面组件接受到canshu数据后在做其他操作#xff0c;…在nextjs项目中发现两个组件没啥关系例如一个是一直存在的头部组件另一个是页面中的组件当我点击头部组件中的特定按钮时把数据传递到页面组件中页面组件接受到canshu数据后在做其他操作那么他们两个如何通讯通过context配合观察者模式实现。 首先在其共同的祖先组件中使用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 Layouttest1.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在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在对应的页面组件中接收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组件之间通信的方法