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
相关推荐
晴殇i3 分钟前
前端工程师必须掌握的SEO实战指南
前端·javascript·面试
problc17 分钟前
CSS 工具对比:UnoCSS vs Tailwind CSS,谁是你的菜?
前端·css
天天摸鱼的java工程师22 分钟前
互联网行业能力解刨:从Java后端八年开发经验看
前端·后端·程序员
FlyingBird~27 分钟前
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
java·javascript·typescript
brzhang29 分钟前
Android 16 卫星连接 API 来了,带你写出「永不失联」的应用
前端·后端·架构
John_ToDebug43 分钟前
Chrome 浏览器前端与客户端双向通信实战
前端·c++·chrome
要加油哦~1 小时前
CSS | transition 和 transform的用处和区别
前端·css
小鱼人爱编程1 小时前
现代大前端是如何编码的?
android·前端·flutter
神仙别闹1 小时前
基于Java+VUE+MariaDB实现(Web)仿小米商城
java·前端·vue.js
袁煦丞1 小时前
低成本私有云存储方案Nas-Cab:cpolar实验室第508次成功挑战
前端·程序员·远程工作