react 祖孙关系传递

1. utils下的context.js

javascript 复制代码
import React ,{ createContext} from "react" //createContext 是创建一个上下文对象
export const dateContext= createContext({}) // 创建了一个上下文对象
export const {Provider,Consumer} = dateContext

2.爷爷组件

javascript 复制代码
import {Provider} from "../utils/context"
  <Provider value={obj}>
              <Appson sendfn={sendfn}></Appson>
     </Provider>

3.孙子组件

javascript 复制代码
 import React from 'react'
import {useContext} from "react" // 
import {dateContext} from "../utils/context"
function Appgrand() {
   let contextValue = useContext(dateContext)
   console.log(contextValue,111);
  return (
    <div> 我是爷爷组件传递来的数据{contextValue.name}</div>
  )
}

export default Appgrand
相关推荐
manongdashu1887 小时前
应对“SEO需要支付一年服务费”的捆绑消费,静态建站配套终身低成本服务器,全程无需额外运维开销。的方法。
运维·服务器·前端·seo·静态网站
风骏时光牛马7 小时前
AI提示词有效性深度测试
前端
Su米苏7 小时前
针对使用@vue-office 出现的包异常找不到问题
前端·javascript·vue.js
坚定信念,勇往无前7 小时前
electron打包mac ,apple m4出错:ffprobe是x86,不是arm64
前端·javascript·electron
专业抄代码选手7 小时前
01|从手写 DOM 到虚拟 DOM:把 UI 从“操作”变成“描述”
前端·javascript·react.js
喜欢睡觉7 小时前
单词管理系统
前端·后端
YHL7 小时前
向量数据库入门(二):Embedding → 语义搜索 → RAG 日记助手
前端·架构
码视野7 小时前
基于 Vue3 + Element Plus 的【青少年心理健康智能测评与 AI 情绪树洞陪护干预系统】设计与实现(含PRD/三端源码/大屏)
前端·vue.js·人工智能·vue3
专业抄代码选手7 小时前
03|React 为什么需要协调:比较两棵树,而不是重建页面
前端·javascript·react.js
灯澜忆梦7 小时前
【基于GO的Web开发11】gin获取URL‑Path 路径参数
前端·后端·golang·html·gin