react跨组件通信Context

案例:现在有个父-子-孙组件 需要进行组件通信

import { useState } from "react";
// 创建上下文
const CountContext = React.createContext();//子组件
const SonComponent = (props) => {return (<div><h2>子组件</h2><GrandsonComponent></GrandsonComponent></div>);
};//孙组件
const GrandsonComponent= ({onGetMsg,count}) => {const msg=count===0?'999':0return (<div><h3>孙组件</h3></div>);
};function App() {const title="hello world";const [count,setCount]=useState(0);return (<div className="App"><h1>父组件</h1><SonComponent/></div>);
}export default App;

跨组件通信Context

import { useState,useContext ,createContext } from "react";
const CountContext = createContext();//子组件
const SonComponent = (props) => {return (<div><h2>子组件</h2><GrandsonComponent></GrandsonComponent></div>);
};//孙组件
const GrandsonComponent = () => {const { count, setCount ,otherMsg} = useContext(CountContext);const msg = count === 0 ? '999' : 0;return (<div><h3>孙组件{count}</h3><button onClick={() => setCount(msg)}>{otherMsg}</button></div>);
};function App() {const [count,setCount]=useState(0);const otherMsg='父组件的参数'return (<CountContext.Provider value={{ count, setCount,otherMsg }}><div className="App"><h1>父组件 {count}</h1><SonComponent /></div></CountContext.Provider>);
}export default App;

也是就可以实现跨组件通讯,爷爷传参或方法给孙子,孙子获得参数调用和方法了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/338444.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Sentinel与Nacos强强联合,构建微服务稳定性基石的重要实践

一、简介 Sentinel 作为一款强大的流量控制组件&#xff0c;能够对系统入口流量进行精准控制&#xff0c;有效防止服务因突发流量冲击引起服务雪崩&#xff0c;进而导致服务瘫痪&#xff0c;确保服务的稳定性和可靠性。 Nacos 作为配置管理和服务发现平台&#xff0c;实现了配置…

打印机的ip不同且连不上

打印机的ip不同且连不上 1.问题分析2.修改网段3.验证网络 1.问题分析 主要是打印机的网段和电脑不在同一个网段 2.修改网段 3.验证网络

LeetCode 两两交换链表中的节点

原题链接24. 两两交换链表中的节点 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff0c;请看图片的过程模拟&#xff0c;这里添加了一个哨兵节点0&#xff0c;目的是为了方便操作&#xff0c;得到指向1节点的指针。 class Solution {public:ListNode* swapPairs(ListNod…

LeetCode 算法:三数之和c++

原题链接&#x1f517;&#xff1a; 难度&#xff1a;中等⭐️⭐️ 题目 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不…

【JavaEE 进阶(二)】Spring MVC(下)

❣博主主页: 33的博客❣ ▶️文章专栏分类:JavaEE◀️ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; &#x1faf5;&#x1faf5;&#x1faf5;关注我带你了解更多进阶知识 目录 1.前言2.响应2.1返回静态界面2.2返回数据2.3返回HTML代码 3.综合练习3.1计算器3.2用户登…

HarmonyOS Next开发----k线图滑动惯性

K线图的惯性滑动&#xff0c;由于官方提供的Scroller没有设置初始位置的方法&#xff0c;不知道后面会不会支持。由于项目急着上线&#xff0c;所以只有采用另一种方案&#xff0c;滑动结束后模拟计算惯性滑动。 思路&#xff1a; 手指滑动结束后&#xff0c;k线惯性滑动轨迹…

冒泡排序与快速排序

博主主页: 码农派大星. 数据结构专栏:Java数据结构 数据库专栏:MySQL数据库 关注博主带你了解更多数据结构知识 1.冒泡排序 冒泡排序 private static void swap(int[] arrary,int i,int j){int tmp arrary[i];arrary[i] arrary[j];arrary[j] tmp;public static void bubbl…

STM32作业实现(七)OLED显示数据

目录 STM32作业设计 STM32作业实现(一)串口通信 STM32作业实现(二)串口控制led STM32作业实现(三)串口控制有源蜂鸣器 STM32作业实现(四)光敏传感器 STM32作业实现(五)温湿度传感器dht11 STM32作业实现(六)闪存保存数据 STM32作业实现(七)OLED显示数据 STM32作业实现(八)触摸按…

系统架构设计师【第2章】: 计算机系统基础知识 (核心总结)

文章目录 2.1 计算机系统概述2.2 计算机硬件2.2.1 计算机硬件组成2.2.2 处理器2.2.3 存储器2.2.4 总线2.2.5 接口2.2.6 外部设备 2.3 计算机软件2.3.1 计算机软件概述2.3.2 操作系统2.3.3 数据库2.3.4 文件系统2.3.5 网络协议2.3.6 中间件2.3.7 软件构件2.3.8 …

用贪心算法计算十进制数转二进制数(小数部分)

在上一篇博文用贪心算法计算十进制数转二进制数&#xff08;整数部分&#xff09;-CSDN博客中&#xff0c;小编介绍了用贪心算法进行十进制整数转化为二进制数的操作步骤&#xff0c;那么有朋友问我&#xff0c;那十进制小数转二进制&#xff0c;可以用贪心算法来计算吗&#x…

错误模块路径: ...\v4.0.30319\clr.dll,v4.0.30319 .NET 运行时中出现内部错误,进程终止,退出代码为 80131506。

全网唯一解决此BUG的文章&#xff01;&#xff01;&#xff01; 你是否碰到了以下几种问题&#xff1f;先说原因解决思路具体操作1、首先将你C:\Windows\Microsoft.NET\文件夹的所有者修改为你当前用户&#xff0c;我的是administrator。2、修改当前用户权限。3、重启电脑4、删…

童心绘梦,味在蒙自源 —— 蒙自源六一儿童节特别活动

当六月的阳光洒满大地&#xff0c;阵阵知了的叫声唤醒了沉睡的花朵&#xff0c;也唤醒了所有人心中的那份纯真与梦想。每个孩子都是天生的梦想家。他们用纯真的双眼观察世界&#xff0c;用无畏的心灵探索未知。今年的六一儿童节&#xff0c;不仅是孩子们的节日&#xff0c;也是…

数学建模 —— 插值与拟合(1)

一、matlab画图 1.1 plot&#xff08;二维图形&#xff09; plot(x) —— 缺省自变量绘图格式 plot(x,y) —— 基本格式&#xff0c;以y(x)的函数关系作出直角坐标图&#xff0c;如果y为nm的矩阵&#xff0c;则以x为自变量&#xff0c;作出m条曲线 plot(x1,y1,x2,y2,…,xn,…

【MySQL数据库】索引与事务

&#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【MySQL】探秘&#xff1a;数据库世界的瑞士军刀 目录 &#x1f5f3;️一.索引 &#x1f4ee;1.工作原理 &#x1f4ec;2.类型 &#x1f4ed;3.作用 &#x1f4ea;4.优缺点 &#x1f4eb;5.使用…

Git远程操作

下面演示在gitee上创建远程仓库 创建远程仓库 上面的.gitignore是为了在上传时过滤掉不重要的文件&#xff0c;分支模型选单分支模型就够用了&#xff0c;或者选生产/开发模型。 当然&#xff0c;如果创建仓库的时候没有添加.gitignore文件&#xff0c;可以在本地仓库创建.gi…

Nvidia Jetson/Orin +FPGA+AI大算力边缘计算盒子:美团小袋自动配送车

大型电商公司美团已选用NVIDIA Jetson AGX Xavier 平台&#xff0c;作为无人配送机器人核心AI算力。 美团点评是全球大型的按需食品配送公司&#xff0c;结合了Uber Eats、Yelp和Groupon的商业模式&#xff0c;与超过40万家本地企业开展合作。他们推出了小袋自动配送车&#…

【OpenHarmony】TypeScript 语法 ③ ( 条件语句 | if else 语句 | switch case 语句 )

文章目录 一、条件语句1、if else 语句2、switch case 语句 参考文档 : <HarmonyOS第一课>ArkTS开发语言介绍 一、条件语句 1、if else 语句 TypeScript 中的 if 语句 / if else 语句 用法 , 与 JavaScript 语言中的 if 语句 / if else 语句 语法 基本相同 ; if else 语…

QT 信号和槽教程,窗体和控件对象之间的沟通一般都使用信号和槽

Qt的信号和槽&#xff08;Signals and Slots&#xff09;机制是一种强大的对象间通信方式&#xff0c;它允许对象在完全解耦的情况下相互通信。以下是关于Qt信号和槽的简明教程&#xff1a; 基本概念 信号&#xff08;Signal&#xff09;&#xff1a;信号是由Qt对象发出的通知…

Docker 快速更改容器的重启策略(Restart Policies)以及重启策略详解

目录 1. 使用 docker update 命令2. 在启动容器时指定重启策略3. 在 Docker Compose 文件中指定重启策略4. 总结 官方文档&#xff1a;Start containers automatically 1. 使用 docker update 命令 Docker 提供了 docker update 命令&#xff0c;可以在容器运行时更改其重启策…

Elasticsearch:基于多个 kNN 字段对文档进行评分

作者&#xff1a;来自 Elastic Madhusudhan Konda 通过具有多个 kNN 字段的最接近的文档对文档进行评分 Elasticsearch 不仅仅是一个词法&#xff08;文本&#xff09;搜索引擎。 Elasticsearch 是多功能搜索引擎&#xff0c;除了传统的文本匹配之外&#xff0c;还支持 k 最近…