react 祖孙关系传递

news/2024/7/15 18:11:01 标签: react.js, javascript, 前端

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


http://www.niftyadmin.cn/n/5446569.html

相关文章

大屏可视化综合展示解决方案

1.系统概述 1.1.需求分析 1.2.重难点分析 1.3.重难点解决措施 2.系统架构设计 2.1.系统架构图 2.2.关键技术 2.3.接口及要求 3.系统功能设计 3.1.功能清单列表 3.2.数据源管理 3.3.数据集管理 3.4.视图管理 3.5.仪表盘管理 3.6.移动端设计 3.1.系统权限设计 3.…

深度学习-2.9梯度不稳定和Glorot条件

梯度不稳定和Glorot条件 一、梯度消失和梯度爆炸 对于神经网络这个复杂系统来说&#xff0c;在模型训练过程中&#xff0c;一个最基础、同时也最常见的问题&#xff0c;就是梯度消失和梯度爆炸。 我们知道&#xff0c;神经网络在进行反向传播的过程中&#xff0c;各参数层的梯…

由浅到深认识Java语言(18):权限修饰符包Object类

该文章Github地址&#xff1a;https://github.com/AntonyCheng/java-notes 在此介绍一下作者开源的SpringBoot项目初始化模板&#xff08;Github仓库地址&#xff1a;https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址&#xff1a;https://blog.c…

什么是PLC物联网关?PLC物联网关有哪些功能?

在数字化浪潮的推动下&#xff0c;工业物联网&#xff08;IIoT&#xff09;正逐步成为推动制造业智能化转型的关键力量。而在这一变革中&#xff0c;PLC物联网关扮演着至关重要的角色。今天&#xff0c;就让我们一起走进PLC物联网关的世界&#xff0c;了解它的定义、功能&#…

Etcd Raft 协议(进阶篇)

前言 在正式开始介绍 Raft 协议之间&#xff0c;我们有必要简单介绍一下其相关概念。在分布式系统中&#xff0c;一致性是比较常见的概念&#xff0c;所谓一致性指的是集群中的多个节点在状态上达成一致。在程序和操作系统不会崩溃、硬件不会损坏、服务器不会掉电、网络绝对可靠…

prettier + eslint 配置

vue-cli 新建项目选择 ESLint Prettier 会自动下载相关包 settings.json {"editor.formatOnSave": true, // 开启保存文件自动格式化代码"editor.defaultFormatter": "esbenp.prettier-vscode", // 默认的代码格式化工具// "prettier.r…

手撕算法-买卖股票的最佳时机(买卖一次)

描述 分析 只能买卖一次。希望在最低处买&#xff0c;最高处卖。 怎么判断最低处&#xff1f;遍历时存储已遍历的最小值。 怎么判断最高处&#xff1f;遍历时&#xff0c;比较当前位置和最小值的差&#xff0c;取较大的。 代码 class Solution {public int maxProfit(int…

QT+GDAL实现影像的读取和显示

详细流程参考https://blog.csdn.net/deirjie/article/details/37872743 代码 //open_image.h #pragma once #include <QtWidgets/QMainWindow> #include "ui_open_image.h" #include "gdal_priv.h" #include <QMessageBox> #include <QFi…