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
相关推荐
VisuperviReborn10 分钟前
打造自己的前端监控---前端接口监控
前端·javascript·架构
程序员海军11 分钟前
这才是Coding该有的样子!重新定义编程显示器
前端·后端
阳树阳树11 分钟前
小程序鉴权机制分析
前端
BUG收容所所长12 分钟前
如何用React打造一个完整的移动端问卷调查应用?
前端·react.js·开源
Cache技术分享13 分钟前
151. Java Lambda 表达式 - 使用 Consumer 接口处理对象
前端·后端
YGY_Webgis糕手之路15 分钟前
OpenLayers 综合案例-加载gif图
前端·gis
小高00717 分钟前
🚀前端性能优化实录:把 5 秒白屏降到 1.2 秒,只做 7 件事
前端·javascript·面试
FE王同学17 分钟前
使用Taro从零搭建钉钉小程序的步骤
前端
兮漫天29 分钟前
bun + vite7 的结合,孕育的 Robot Admin 靓仔出道(五)
前端·typescript
镀孜谔29 分钟前
uniapp字体
前端