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.mzph.cn/web/20231.shtml

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

相关文章

【机器学习】让大模型变得更聪明

文章目录 前言1. 理解大模型的局限性1.1 理解力的挑战1.2 泛化能力的挑战1.3 适应性的挑战 2. 算法创新&#xff1a;提高模型学习和推理能力2.1 自监督学习2.2 强化学习2.3 联邦学习 3. 数据质量与多样性&#xff1a;增强模型的泛化能力3.1 高质量数据的获取3.2 数据多样性的重…

#1 深度优先搜索

深搜思想 DFS其实是针对图论的一种搜索算法&#xff0c;由一个节点出发&#xff0c;不撞南墙不回头式的遍历所有的节点。 如先遍历1&#xff0c;沿&#xff08;1,2&#xff09;遍历2&#xff0c;再沿&#xff08;2,4&#xff09;遍历4&#xff0c;撞南墙&#xff08;边界条件…

XSS另类攻击(四)kali系统beef-xss安装和使用

★★免责声明★★ 文章中涉及的程序(方法)可能带有攻击性&#xff0c;仅供安全研究与学习之用&#xff0c;读者将信息做其他用途&#xff0c;由Ta承担全部法律及连带责任&#xff0c;文章作者不承担任何法律及连带责任。 1、环境说明 kali系统&#xff0c;ip&#xff1a;192.1…

k8s的ci/cd实践之旅

书接上回k8s集群搭建完毕&#xff0c;来使用它强大的扩缩容能力帮我们进行应用的持续集成和持续部署&#xff0c;整体的机器规划如下&#xff1a; 1.192.168.8.156 搭建gitlab私服 docker pull gitlab/gitlab-ce:latest docker run --detach --hostname 192.168.8.156 --publ…

SAP 生产订单批量报工(代码分享)

最近公司一直在对成本这块的业务进行梳理,影响比较大的就是生产这块的报工,经常会要求要批量的冲销报工,然后在继续报工,来调整生产订单的实际工时,前面的博客中已经给大家分享了批量冲销生产订单的代码, 下面给大家分享一下生产订单批量报工的代码 首先流程制造和离散制…

推荐几首听无数遍也听不腻的好歌(1)

1.Wannabe (Spice Girls Cover) 这首歌是Why Mona创作的首红眼特效的歌&#xff0c;唱的像牙痛的唱不清楚&#xff0c;但配上超级劲爆的旋律及节奏&#xff0c;简直好听到爆 2.Down For Life (Reset) 这首HSHK创作的纯音乐&#xff0c;虽然旋律一直重复一个调&#xff0c;但…

【算法】过桥

✨题目链接&#xff1a; 过桥 ✨题目描述 ✨输入描述: 第一行一个数n(2≤n≤2000) 接下来一行n个数a[i](1≤|a[i]|≤2000)表示浮块上的数字 ✨输出描述: 输出一行&#xff0c;表示对应的答案 ✨示例1 &#x1f4cd;输入 4 2 2 -1 2 &#x1f4cd;输出 2 &#x1f4cd;说明 1…

前端经典手写面试题---节流防抖

防抖 定义: n 秒后在执行该事件&#xff0c;若在 n 秒内被重复触发&#xff0c;则重新计时。 场景: 搜索框搜索输入。只需用户最后一次输入完&#xff0c;再发送请求手机号、邮箱验证输入检测窗口大小resize。只需窗口调整完成后&#xff0c;计算窗口大小。防止重复渲染。 实…

HNCTF 2024 ez_pecp 冰蝎+CS流量分析

考点:冰蝎webshell流量分析CS4.x流量解密 给了两个 流量包 第一个 ctf1.pcapng 查看其HTTP请求 而在CS中流量特征是基于tls协议 http-beacon 通信中&#xff0c;默认使用 GET 方法向 /dpixel 、/__utm.gif 、/pixel.gif 等地址发起请求&#xff0c;而且下发指令的时候会请求 …

如何使用浔川AI翻译机?——浔川AI社

1 前言 对于“如何使用浔川AI翻译机&#xff1f;”这个问题&#xff0c;我们官方 总结出以下结论&#xff1a; 首先&#xff1a; 复制以下代码&#xff1a; # -*- coding: utf-8 -*- import tkinter as tk import tkinter.messagebox import pickle import random# 窗口 wi…

Springboot校验集合是否为空,校验集合内对象参数

一、示例1 public AjaxResult saveQuoted(RequestBody NotEmpty List< Valid HisParam> list) {}二、示例2 public class Comment {NotNull(message "orderId 不能为空")private Long orderId;ValidNotEmpty(message "itemList不能为空")private…

Jmeter压测中遇到的问题汇总

Jmeter使用过程问题总结 一、某个请求的请求体中有中文字段&#xff0c;执行后该请求无法成功 解决方法&#xff1a;在取样器的内容编码处加上UTF-8 二、遇到接口请求后报401&#xff0c;请求未授权&#xff08;或者信息头管理器只写了cookie请求不成功&#xff09; 解决方…

记录深度学习GPU配置,下载CUDA与cuDnn,安装tensorflow

目标下载: cuda 11.0.1_451.22 win10.exe cudnn-11.0-windows-x64-v8.0.2.39.zip Anaconda的安装请看别的博主的,这里不再赘述 看看自己电脑的cuda 方法一:打开英伟达面板查看 方法二:使用命令行 随便找个文件夹,在顶部路径输入"cmd" 输入下面命令 nvidia-smi 我…

【TensorFlow深度学习】深度学习中的梯度传播机制解析

深度学习中的梯度传播机制解析 反向传播基础理论概览梯例&#xff1a;Sigmoid激活函数的梯度传播实战例代码结构反向传播机制的精髓结语 深度学习中的梯度传播机制&#xff1a;揭秘神经网络的核心算法 深度学习的兴起&#xff0c;离不开一个至关重要的算法——反向传播&#xf…

2406C++,ADL加隐式转换

原文 最近在搞iguana.struct_pb动态反射功能时,遇见一个奇怪的问题. struct person {std::string name;int64_t age; }; REFLECTION(person, name, age); struct persons {std::vector<person> list; }; REFLECTION(persons, list); //#1 static_assert(iguana::is_publ…

小程序配置自定义tabBar及异形tabBar配置操作

什么是tabBar&#xff1f; 小程序的tabbar是指小程序底部的一组固定导航按钮&#xff0c;通常包含2-5个按钮&#xff0c;用于快速切换小程序的不同页面。每个按钮都有一个图标和文本标签&#xff0c;点击按钮可以切换到对应的页面。tabbar通常放置在小程序的底部&#xff0c;以…

vue 权限分组

在权限设计时&#xff0c;分为部门、岗位、人员三部分&#xff0c; 人员下面挂部门&#xff0c;部门下面挂岗位&#xff0c;岗位下面挂菜单&#xff0c;用户在进行授权时&#xff0c;勾选了操作权限&#xff0c;默认数据权限也进行勾选。 权限组&#xff1a;查询、新增、修改、…

开发一套家政上门预约服务系统需要运用的关键技术

家政上门预约服务系统开发是指建立一个在线平台或应用程序&#xff0c;用于提供家政服务的预约和管理功能。该系统的目标是让用户能够方便地预约各种家政服务&#xff0c;如保洁、家庭护理、月嫂、家电维修等&#xff0c;并实现服务供应商管理和订单管理等功能。 开发一套家政上…

01Linux以及操作系统概述

课程目标 1.了解现代操作系统的整体构成及发展历史 2.了解Linux操作系统及其分支版本 3.直观上理解服务器端与桌面端版本的区别 课程实验 1.通过对CentOS和Ubuntu的演示&#xff0c;直观理解Linux与Windows的异同 课堂引入 本章内容主要为大家详细讲解Linux操作系统(以下简…

PPT 隐藏开启对象图层

目录预览 一、问题描述二、解决方案三、参考链接 一、问题描述 制作PPT的时候&#xff0c;有时候需要在一张PPT放置多个依次出现的内容&#xff0c;然后设置对应的动画&#xff0c;要是需要对某个内容进行修改的话&#xff0c;就会很不方便&#xff0c;这个时候就需要使用&…