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
相关推荐
DanCheOo10 分钟前
Prompt 工程化管理:从散落在代码里到版本化、可测试、可回滚
前端·ai编程
涛涛ing12 分钟前
Vue 3.5 下一站:cached 提案,重新定义响应式缓存
前端
胖子不胖14 分钟前
svg之viewBox
前端
隔壁老王111114 分钟前
浅谈JavaScript内存管理
javascript
吹牛不交税17 分钟前
tree-transfer-vue3 前端插件安装问题解决(--legacy-peer-deps)(其他插件可考虑)适用
前端·javascript·vue.js
ricardo197318 分钟前
Chrome DevTools + Lighthouse + Performance API:前端性能调优三件套实操指南
前端
Appoint_x20 分钟前
设计稿自己会说话:我用 Claude 给 Figma 做了个 AI 上下文插件
前端·javascript
豹哥学前端22 分钟前
浏览器console里的双中括号 `[[ ]]`
前端·javascript·ecmascript 6
菜泡泡@23 分钟前
npm 安装pnpm之后运行pnpm -v查询报错
前端·npm·node.js