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

react通过上下文深入传递数据

通常,您将通过 props 将信息从父组件传递到子组件。但是,如果必须将道具传递到中间的许多组件,或者应用中的许多组件需要相同的信息,则传递道具可能会变得冗长且不方便。Context 允许父组件将一些信息提供给其下树中的任何组件(无论其深度如何),而无需通过 prop 显式传递它。

传递道具的问题

传递道具是将数据通过 UI 树显式传递到使用它的组件的好方法。

但是,当您需要将一些道具深入树中传递时,或者如果许多组件需要相同的道具时,传递道具可能会变得冗长和不方便。最接近的共同祖先可能与需要数据的组件相距甚远,将状态提升到如此高的水平可能会导致一种称为“支柱钻孔”的情况。

如果有一种方法可以在不传递道具的情况下将数据“传送”到树中需要它的组件,那不是很好吗?有了 React 的上下文功能,就有了!

上下文:传递道具的替代方案

Context 允许父组件向其下的整个树提供数据。上下文有很多用途。下面是一个例子。考虑以下接受 a 大小的组件:Headinglevel

import Heading from './Heading.js';
import Section from './Section.js';export default function Page() {return (<Section><Heading level={1}>Title</Heading><Heading level={2}>Heading</Heading><Heading level={3}>Sub-heading</Heading><Heading level={4}>Sub-sub-heading</Heading><Heading level={5}>Sub-sub-sub-heading</Heading><Heading level={6}>Sub-sub-sub-sub-heading</Heading></Section>);
}
export default function Section({ children }) {return (<section className="section">{children}</section>);
}
export default function Heading({ level, children }) {switch (level) {case 1:return <h1>{children}</h1>;case 2:return <h2>{children}</h2>;case 3:return <h3>{children}</h3>;case 4:return <h4>{children}</h4>;case 5:return <h5>{children}</h5>;case 6:return <h6>{children}</h6>;default:throw Error('Unknown level: ' + level);}
}

假设您希望同一标题中的多个标题始终具有相同的大小:Section

import Heading from './Heading.js';
import Section from './Section.js';export default function Page() {return (<Section><Heading level={1}>Title</Heading><Section><Heading level={2}>Heading</Heading><Heading level={2}>Heading</Heading><Heading level={2}>Heading</Heading><Section><Heading level={3}>Sub-heading</Heading><Heading level={3}>Sub-heading</Heading><Heading level={3}>Sub-heading</Heading><Section><Heading level={4}>Sub-sub-heading</Heading><Heading level={4}>Sub-sub-heading</Heading><Heading level={4}>Sub-sub-heading</Heading></Section></Section></Section></Section>);
}
export default function Section({ children }) {return (<section className="section">{children}</section>);
}
export default function Heading({ level, children }) {switch (level) {case 1:return <h1>{children}</h1>;case 2:return <h2>{children}</h2>;case 3:return <h3>{children}</h3>;case 4:return <h4>{children}</h4>;case 5:return <h5>{children}</h5>;case 6:return <h6>{children}</h6>;default:throw Error('Unknown level: ' + level);}
}

目前,您将 prop 分别传递给每个:level<Heading>

<Section>
<Heading level={3}>About</Heading>
<Heading level={3}>Photos</Heading>
<Heading level={3}>Videos</Heading>
</Section>

如果您可以将 prop 传递给组件并将其从 .这样,您可以强制同一部分中的所有标题都具有相同的大小:level<Section><Heading>

<Section level={3}>
<Heading>About</Heading>
<Heading>Photos</Heading>
<Heading>Videos</Heading>
</Section>

相关文章:

react通过上下文深入传递数据

通常&#xff0c;您将通过 props 将信息从父组件传递到子组件。但是&#xff0c;如果必须将道具传递到中间的许多组件&#xff0c;或者应用中的许多组件需要相同的信息&#xff0c;则传递道具可能会变得冗长且不方便。Context 允许父组件将一些信息提供给其下树中的任何组件&am…...

「代码厨房大揭秘:Python性能优化的烹饪秘籍!」

哈喽&#xff0c;我是阿佑&#xff0c;上篇咱们讲了 Socket 编程 —— 探索Python Socket编程&#xff0c;赋予你的网络应用隐形斗篷般的超能力&#xff01;从基础到实战&#xff0c;构建安全的聊天室和HTTP服务器&#xff0c;成为网络世界的守护者。加入我们&#xff0c;一起揭…...

【重学C语言】十六、联合、枚举、面向对象编程

【重学C语言】十六、联合、枚举、面向对象编程 联合定义联合体使用联合体注意事项枚举枚举的定义为枚举常量指定整数值枚举的使用枚举的打印枚举的优势注意事项面向对象编程1. 结构体(Structs)2. 封装(Encapsulation)3. 继承(Inheritance)...

Github2024-05-21 Python开源项目日报 Top10

根据Github Trendings的统计,今日(2024-05-21统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目10C项目1TypeScript项目1youtube-dl - 从YouTube和其他网站下载视频的命令行程序 创建周期:4951 天开发语言:Python协议类型:The …...

labview_开放协议

一、开放协议 二、硬件设置 英格索兰硬件设置&#xff1a; 三、配套测试软件 四、Labview代码...

AWS安全性身份和合规性之Amazon Macie

Amazon Macie是一项数据安全和数据隐私服务&#xff0c;它利用机器学习&#xff08;ML&#xff09;和模式匹配来发现和保护敏感数据。可帮助客户发现、分类和保护其敏感数据&#xff0c;以及监控其数据存储库的安全性。 应用场景&#xff1a; 敏感数据发现 一家金融服务公司…...

redis数据类型set,zset

华子目录 Set结构图相关命令sdiff key1 [key2]sdiffstore destination key1 [key2...]sinter key1 [key2...]sinterstore destination key1 [key2...]sunion key1 [key2...]sunionstore destination key1 [key2...]smove source destination memberspop key [count]sscan key c…...

央视网视频下载和花屏问题处理

央视网(www.cctv.com)视频下载往往是花屏的&#xff0c;如何处理呢&#xff1f; 如果您是IT技术开发者&#xff0c;那么您可以通过下面步骤自己实现。 用chrome浏览器&#xff0c;F2打开开发者工具&#xff0c;找到当前页面的network 然后找一个接口&#xff1a;https://vdn.a…...

四、通信和网络安全—局域网|广域网|远程连接和攻击技术(CISSP)

目录 1.局域网和广域网 1.1 WAN技术总结 2.远程连接—无线技术 2.1 VPN 2.2 隧道协议总结...

15、设计模式之责任链模式

责任链模式 顾名思义&#xff0c;责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;为请求创建了一个接收者对象的链。这种模式给予请求的类型&#xff0c;对请求的发送者和接收者进行解耦。这种类型的设计模式属于行为型模式。 在这种模式中&#xff0c;通…...

神奇动物在哪里,但导演是微软

大数据产业创新服务媒体 ——聚焦数据 改变商业 一说到计算机视觉&#xff0c;大多数人第一时间联想到的便是“人脸识别”、“自动驾驶“、道路检测”等跟我们日常生活息息相关的关键词。而在2024年的5月末&#xff0c;微软在GitHub上面上传了这样一个计算机视觉的项目&#x…...

Flutter 中的 Flow 小部件:全面指南

Flutter 中的 Flow 小部件&#xff1a;全面指南 Flutter 的 Flow 是一个功能强大的布局小部件&#xff0c;它允许开发者在父组件的任意位置放置子组件。Flow 可以通过使用 FlowDelegate 完全自定义子组件的布局&#xff0c;这为创建复杂的自定义布局提供了极大的灵活性。本文将…...

【pyspark速成专家】11_Spark性能调优方法2

目录 ​编辑 二&#xff0c;Spark任务UI监控 三&#xff0c;Spark调优案例 二&#xff0c;Spark任务UI监控 Spark任务启动后&#xff0c;可以在浏览器中输入 http://localhost:4040/ 进入到spark web UI 监控界面。 该界面中可以从多个维度以直观的方式非常细粒度地查看Spa…...

吊顶的做法防踩坑,吊顶怎么省钱还好看

怎么做个好看的吊顶?你天天抬头看不? 现在楼房到手本身层高两米75左右,等铺完地暖和瓷砖还得增加几公分 如果再整个吊顶,就属于花钱买压抑了,吊顶就是遮丑, 某些比较显层高还亮堂,今天把做法分享出来 开发商给的毛坯两米8 做完地暖铺完瓷砖,层高是两米七八, 让木工在走廊两边…...

揭秘Tensor Core黑科技:如何让AI计算速度飞跃

揭秘 Tensor Core 底层&#xff1a;如何让AI计算速度飞跃 Tensor Core&#xff0c;加速深度学习计算的利器&#xff0c;专用于高效执行深度神经网络中的矩阵乘法和卷积运算&#xff0c;提升计算效率。 Tensor Core凭借混合精度计算与张量核心操作&#xff0c;大幅加速深度学习…...

为什么会有websocket(由来)

一、HTTP 协议的缺点和解决方案 1、HTTP 协议的缺点和解决方案 用户在使用淘宝、京东这样的网站的时候&#xff0c;每当点击一个按钮其实就是发送一个http请求。那我们先来回顾一下http请求的请求方式。 一个完整的http请求是被分为request请求节点和response响应阶段的&…...

【MySQL精通之路】优化

1 优化概述 数据库性能取决于数据库级别的几个因素&#xff0c;如表、查询和配置设置。这些软件结构导致了硬件级别的CPU和I/O操作&#xff0c;您必须将其最小化并使其尽可能高效。 在研究数据库性能时&#xff0c;首先要学习软件方面的高级规则和指导原则&#xff0c;并使用挂…...

解读大模型应用的可观测性

一、引言 随着人工智能技术的飞速发展&#xff0c;大模型作为AI领域的重要分支&#xff0c;正日益成为科技竞争的新高地。大模型通过输入大量语料进行训练&#xff0c;赋予计算机拥有像人类一样的“思考”能力&#xff0c;使其能够理解文本、图片、语音等内容&#xff0c;并进…...

嵌入式学习记录5.18(多点通信)

一、套接字属性设置相关函数 #include <sys/types.h> /* See NOTES */#include <sys/socket.h>int getsockopt(int sockfd, int level, int optname,void *optval, socklen_t *optlen);int setsockopt(int sockfd, int level, int optname,const void *op…...

shell脚本的基础应用

规范脚本的构成 #&#xff01;/bin/bash # 注释信息 可执行的语句 执行脚本的方法 有1.添加x权限 ,绝对路经&#xff0c;或者相对路径2. 使用解释器 不需加x,root...bash...bash..echo 3,用source&#xff0c; 开机root ...bash ...echo bash -x /opt/test01.sh &#xff…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

《Docker》架构

文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器&#xff0c;docker&#xff0c;镜像&#xff0c;k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...