当前位置: 首页 > news >正文

react组件间通信之context

  • 一般用于【祖组件】与【后代组件】间通信

    案例:

    A,B,C,D四个组件的关系分别为:爷爷,爸爸,儿子,孙子
    从A向C传递参数:C组件为类式组件
    从A向D传递参数:D组件为函数组件

    import React, { Component } from 'react'
    import './index.css'/*** 【祖组件】与【后代组件】间通信*/// 创建Context容器对象:
    const MyContext = React.createContext()
    const {Provider,Consumer} = MyContextexport default class A extends Component {state = {name:'sun',age:18}render() {const {name,age} = this.state;return (<div className='one'><h5>A组件</h5><div>我的名字是:{name}</div>{/* 渲染子组件时,外面包裹Provider,通过value属性给后代组件传递参数 */}<Provider value={{name,age}}><B></B></Provider></div>)}
    }class B extends Component {render() {return (<div className='two'><h5>B组件</h5><C></C></div>)}
    }/*** 后代组件读取数据* 方式一:仅使用于类组件*/
    class C extends Component {// 第一步:声明接受contextstatic contextType = MyContext;render() {return (<div className='three'><h5>C组件</h5>{/* 第二步:读取context中的value数据 */}<div>C组件从A组件拿到的名字是:{this.context.name}</div>        <D></D></div>)}
    }/*** 后代组件读取数据* 方式二:函数组件与类组件都可以*/
    function D(){return(<div className='four'><h5>D组件</h5><div>D组件从A组件拿到的名字是:<Consumer>{value => `${value.name},年龄是:${value.age}`}</Consumer></div></div>)
    }

    样式文件:

    .one{width: 500px;background-color: red;padding: 20px;
    }
    .two{width: 90%;background-color: orange;padding: 20px;
    }
    .three{width: 90%;background-color: yellow;padding: 20px;
    }
    .four{width: 90%;background-color: green;padding: 20px;
    }
    

    运行效果:
    在这里插入图片描述

相关文章:

react组件间通信之context

一般用于【祖组件】与【后代组件】间通信 案例&#xff1a; A,B,C,D四个组件的关系分别为&#xff1a;爷爷&#xff0c;爸爸&#xff0c;儿子&#xff0c;孙子 从A向C传递参数&#xff1a;C组件为类式组件 从A向D传递参数&#xff1a;D组件为函数组件 import React, { Componen…...

京东数据分析:2023年10月京东洗衣机行业品牌销售排行榜

鲸参谋监测的京东平台10月份洗衣机市场销售数据已出炉&#xff01; 10月份&#xff0c;洗衣机市场整体销售呈上升走势。鲸参谋数据显示&#xff0c;今年10月&#xff0c;京东平台洗衣机市场的销量为143万&#xff0c;环比增长约23%&#xff0c;同比增长约1%&#xff1b;销售额约…...

QQ恢复聊天记录,就用这3个方法!

无论是因为误操作、手机丢失、系统崩溃&#xff0c;还是因为更换了新手机&#xff0c;恢复重要的QQ聊天记录都是一件必做的事情。通过聊天记录&#xff0c;用户可以随时查看之前的信息&#xff0c;以便了解事情的经过。 那么&#xff0c;如何恢复丢失的QQ聊天记录呢&#xff1…...

高能数造电池3D打印智能制造小试线,开启全固态电池数字化新时代

在科技创新的浪潮中&#xff0c;电池制造领域又迎来了一次突破性的进展。近日&#xff0c;高能数造(西安)技术有限公司重磅推出了其最新电池数字制造装备——全固态电池3D打印智能制造小试线 &#xff0c;这一创新性的技术开启了全固态电池的数字化智造新时代&#xff0c;为全固…...

stable diffusion为什么能用于文本到图像的生成

推荐基于稳定扩散(stable diffusion) AI 模型开发的自动纹理工具&#xff1a; DreamTexture.js自动纹理化开发包 - NSDT 稳定扩散获得如此多关注的原因 如果你还没有看过它&#xff1a;稳定扩散是一个文本到图像的生成模型&#xff0c;你可以输入一个文本提示&#xff0c;比如…...

c语言刷题第10周(16~20)

规律&#xff1a; 若多个次数最多按ASCII码顺序输出。 用for循环i取&#xff08;0~26&#xff09; 则输出满足条件的字符串中位置最靠前的那个。 用while循环遍历&#xff08;while&#xff08;a[i]!\0&#xff09;&#xff09; 从键盘输入任意只含有大小写字母的串s&…...

Vue.js 响应式系统深度剖析

Vue.js 是当前最流行的 JavaScript 前端框架之一&#xff0c;其核心特性之一就是响应式系统。Vue.js 响应式系统的设计允许开发者以声明式的方式更新 DOM&#xff0c;随着数据变化自动更新相关组件。本文将详细介绍 Vue.js 响应式系统的工作原理&#xff0c;并通过示例来展示其…...

LabVIEW如何才能得到共享变量的引用

LabVIEW如何才能得到共享变量的引用 有一个LabVIEW 库文件 (.lvlib) &#xff0c;其中有一些定义好的共享变量。但需要得到每个共享变量的引用以便在程序运行时访问其属性。 共享变量的属性定义在“变量”类属性节点中。为了访问变量类&#xff0c;共享变量的引用必须连接到变…...

界面控件DevExtreme图表和仪表(v23.1) - 新功能(Angular,React,Vue,jQuery)

本文将为大家总结下DevExtreme在v23.1版本中发布的一些与图表和仪表盘相关的功能。 DevExtreme拥有高性能的HTML5 / JavaScript小部件集合&#xff0c;使您可以利用现代Web开发堆栈&#xff08;包括React&#xff0c;Angular&#xff0c;ASP.NET Core&#xff0c;jQuery&#…...

Rust和isahc库编写代码示例

Rust和isahc库编写的图像爬虫程序的代码&#xff1a; rust use isahc::{Client, Response}; fn main() { let client Client::new() .with_proxy("") .finish(); let url ""; let response client.get(url) .send() …...

Win10笔记本开热点后电脑断网的解决方法

在Win10笔记本电脑中用户可以随时打开热点&#xff0c;但是发现热点开启后电脑就会断网&#xff0c;网络不稳定就会影响到用户的正常使用。下面小编给大家介绍两种简单的解决方法&#xff0c;解决后用户在Win10笔记本电脑开热点就不会有断网的问题出现了。 具体解决方法如下&am…...

跨链知识指南

跨链知识指南 什么是跨链 跨链就是能够让两个不同的链产生某种关联的技术&#xff0c;或者说能把链A的东西搬到链B&#xff0c;跨链是一个复杂的过程&#xff0c;需要链对链外的信息的获取与验证&#xff0c;需要节点有单独的验证能力等等 什么是跨链桥&#xff1f; 跨链桥…...

字符编码转换时发生内存越界引发的摄像头切换失败问题的排查

目录 1、问题说明 2、初步分析 3、字符串字符编码说明 4、进一步分析 5、为啥在日常测试时没有遇到切换摄像头失败的问题呢&#xff1f; 6、华为MateBook笔记本使用高通的CPU 7、最后 VC常用功能开发汇总&#xff08;专栏文章列表&#xff0c;欢迎订阅&#xff0c;持续更…...

git修改之前的commit提交的作者信息和邮箱信息

更改之前提交的作者信息和邮箱信息需要进行两步操作。首先&#xff0c;使用 git filter-branch 命令进行历史重写&#xff0c;然后使用 git push --force 将更改推送到远程仓库。 步骤 1: 使用 git filter-branch 进行历史重写 在终端或命令行中执行以下命令&#xff1a; gi…...

《视觉SLAM十四讲》-- 相机与图像

04 相机与图像 4.1 相机模型 4.1.1 针孔相机模型 针孔模型描述了一束光线通过针孔后&#xff0c;在针孔背面投影成像的关系&#xff08;类似小孔成像原理&#xff09;。 根据相似三角关系 Z f − X X ′ − Y Y ′ (3-1) \frac{Z}{f}-\frac{X}{X^{\prime}}-\frac{Y}{Y^{\p…...

欧科云链:成本与规模之辨——合规科技如何赋能香港Web3生态?

作为国际金融中心&#xff0c;香港近两年来在虚拟资产及Web3领域频频发力。秉持着“稳步创新”的基本逻辑&#xff0c;香港在虚拟资产与Web3领域已建立一定优势&#xff0c;但近期各类风险事件的发生则让业界的关注焦点再次转向“安全”与“合规”。 在香港FinTech Week前夕&a…...

【文献分享】NASA JPL团队CoSTAR一大力作:直接激光雷达里程计:利用密集点云快速定位

论文题目&#xff1a;Direct LiDAR Odometry: Fast Localization With Dense Point Clouds 中文题目&#xff1a;直接激光雷达里程计:利用密集点云快速定位 作者&#xff1a;Kenny Chen, Brett T.Lopez, Ali-akbar Agha-mohammadi 论文链接&#xff1a;https://arxiv.org/pd…...

SPASS-探索性分析

探索性分析的意义 探索性分析更加强大,它是一种在对资料的性质、分布特点等完全不清楚的情况下,对变量进行更深入研究的描述性统计方法。在进行统计分析前,通常需要寻求和确定适合所研究的问题的统计方法, SPSS提供的探索性分析是解决此类问题的有效办法 探索性分析提供了很…...

电子印章怎么弄?三步教你电子印章在线生成免费教程!

在这个数字化快速发展的时代&#xff0c;电子印章已经成为日常商务活动中不可或缺的一部分。相对于传统的实体印章&#xff0c;电子印章具有更高的便捷性和安全性&#xff0c;更是无纸化办公中必不可少的一环。那么&#xff0c;电子印章怎么弄呢&#xff1f;跟着下面这三步来操…...

以技术创新引领行业发展,飞凌嵌入式获双项省级荣誉

近日&#xff0c;飞凌嵌入式荣获「2023年河北省专精特新示范企业」以及「第五批省级制造业单项冠军企业」两项殊荣。这两项荣誉的获得&#xff0c;是对飞凌嵌入式在专业技术领域与创新能力的高度认可&#xff0c;荣誉的背后&#xff0c;凝聚着飞凌嵌入式无数次的研发探索与对创…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

高考志愿填报管理系统---开发介绍

高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发&#xff0c;采用现代化的Web技术&#xff0c;为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## &#x1f4cb; 系统概述 ### &#x1f3af; 系统定…...

如何在Windows本机安装Python并确保与Python.NET兼容

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

基于Uniapp的HarmonyOS 5.0体育应用开发攻略

一、技术架构设计 1.混合开发框架选型 &#xff08;1&#xff09;使用Uniapp 3.8版本支持ArkTS编译 &#xff08;2&#xff09;通过uni-harmony插件调用原生能力 &#xff08;3&#xff09;分层架构设计&#xff1a; graph TDA[UI层] -->|Vue语法| B(Uniapp框架)B --&g…...