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
相关推荐
再花1 分钟前
VitePress+Github Pages实现静态文档站
前端
Lsx_4 分钟前
案例+图解带你一文读懂Svg、Canvas、Css、Js动画🔥🔥(4k+字)
前端·javascript·canvas
十一.36613 分钟前
127-130 定时器的简介,切换图片练习,修改div移动练习,延时调用
前端·javascript·html
Jolyne_14 分钟前
React下拉框接口请求hook封装
前端
狗头大军之江苏分军14 分钟前
2025,我的"Vibe Coding"时刻:当 AI 成为我的编程搭档
前端
同学8079615 分钟前
🔥🔥Vue数字翻滚动画组件:让数据展示更具视觉冲击力
前端·vue.js
oak隔壁找我21 分钟前
JavaScript 的函数方法apply、call和bind
javascript
HashTang23 分钟前
【AI 编程实战】第 5 篇:Pinia 状态管理 - 从混乱代码到优雅架构
前端·vue.js·ai编程
青莲84323 分钟前
Kotlin Flow 深度探索与实践指南——上部:基础与核心篇
android·前端
学习非暴力沟通的程序员24 分钟前
Immer 实战案例解析:让不可变数据操作更简单
react.js