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
相关推荐
森叶5 分钟前
Electron 安装包 asar 解压定位问题实战
前端·javascript·electron
drebander8 分钟前
ubuntu 安装 chrome 及 版本匹配的 chromedriver
前端·chrome
软件技术NINI18 分钟前
html知识点框架
前端·html
深情废杨杨21 分钟前
前端vue-插值表达式和v-html的区别
前端·javascript·vue.js
GHUIJS22 分钟前
【vue3】vue3.3新特性真香
前端·javascript·vue.js
众生回避28 分钟前
鸿蒙ms参考
前端·javascript·vue.js
洛千陨28 分钟前
Vue + element-ui实现动态表单项以及动态校验规则
前端·vue.js
笃励1 小时前
Angular面试题五
javascript·ecmascript·angular.js
GHUIJS1 小时前
【vue3】vue3.5
前端·javascript·vue.js
-seventy-1 小时前
对 JavaScript 原型的理解
javascript·原型