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
相关推荐
GISer_Jing15 分钟前
Vue 和 React 状态管理的性能优化策略对比
vue.js·react.js·性能优化
海天胜景17 分钟前
jqGrid冻结列错行问题,将冻结表格(悬浮表格)与 正常表格进行高度同步
前端
清风细雨_林木木42 分钟前
解决 Tailwind CSS 代码冗余问题
前端·css
HSunR1 小时前
vue3 elementplus tabs切换实现
javascript·vue.js·elementui
搏博1 小时前
WPS中代码段的识别方法及JS宏实现
开发语言·javascript·wps
三天不学习1 小时前
VueUse/Core:提升Vue开发效率的实用工具库
前端·javascript·vue.js·vueuse
好青崧1 小时前
等于和绝对等于的区别
javascript
余道各努力,千里自同风1 小时前
CSS实现文本自动平衡text-wrap: balance
前端·css
半青年2 小时前
Qt图表库推荐指南与分析
c语言·开发语言·javascript·c++·qt·信息可视化
Yvonne爱编码2 小时前
CSS- 4.3 绝对定位(position: absolute)&学校官网导航栏实例
前端·css·html·html5·hbuilder