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>

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

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

相关文章

产线虚拟现实vr仿真软件开发在线上能全面呈现企业品质和专业度

在数字化浪潮中&#xff0c;上海VR全景场景制作公司凭借其领先的VR全景制作技术&#xff0c;正为各行各业带来前所未有的沉浸式体验。无论是学校企业场地的生动展示&#xff0c;还是汽车内饰与外观的360度全景呈现&#xff0c;我们都能通过VR虚拟现实制作技术&#xff0c;让您的…

ECU 关键通讯信息安全事件记录清单

车辆变速箱ECU&#xff08;电子控制单元&#xff09;控制器的通信信息安全对于确保车辆的正常运行和驾驶安全至关重要。以下是一些关键的通信信息安全事件&#xff0c;应当进行日志记录&#xff1a; 通信协议异常&#xff1a;记录任何不符合既定通信协议的数据包&#xff0c;这…

斯坦福大学ALOHA家务机器人团队发布了最新研究成果—YAY Robot语言交互式操作系统

ALOHA YAY 演示视频-智能佳 斯坦福的ALOHA家务机器人团队&#xff0c;发布了最新研究成果—Yell At Your Robot&#xff08;简称YAY&#xff09;&#xff0c;有了它&#xff0c;机器人的“翻车”动作&#xff0c;只要喊句话就能纠正了&#xff01; 标ALOHA2协作平台题 而且机器…

赶紧收藏!2024 年最常见 20道 Rocket MQ面试题(一)

一、RocketMQ是什么&#xff1f; RocketMQ是一个高性能、高可靠、高实时、分布式的消息中间件&#xff0c;最初由阿里巴巴集团开发&#xff0c;并在经历了淘宝双十一大规模高并发场景的考验后&#xff0c;捐赠给Apache软件基金会&#xff0c;成为Apache顶级项目。它具备以下特…

SpringSecurity登录和校验流程简述

认证&#xff1a; 验证当前访问系统的是不是本系统的用户&#xff0c;并且要确认具体是哪个用户 授权&#xff1a; 经过认证后判断当前用户是否有权限进行某个操作 一、入门案例实现 搭建springboot工程后&#xff0c;创建启动类和Controller&#xff0c;引入SpringSecurity依…

数据库-select查询语句

表复制&#xff1a;key不会被复制: 主键、外键和索引 复制表 1.复制表结构&#xff0b;记录 &#xff08;key不会复制: 主键、外键和索引&#xff09; 语法:create table 新表 select * from 旧表; mysql>use company; mysql> create table new_t1 select * from employe…

CCF- CSP 2018.12 - 1.2题 Java语言解题

2018.12-1 小明上学 import java.util.Scanner;public class text01_RedLight {public static void main(String[] args) {Scanner scanner new Scanner(System.in);int r scanner.nextInt();int y scanner.nextInt();int g scanner.nextInt();int n scanner.nextInt();in…

springboot 两个相同类型的Bean使用@Resouce加载

问题描述 有两个相同类型的Bean 使用Service等注解注入或者Bean注入启动以后报错&#xff1a; qualifying bean of type com.fasterxml.jackson.databind.ObjectMapper available: expected single matching bean but found 2提示有相同的类型两个。 解决 * 每个Bean Resour…

第15章-超声波避障功能 HC-SR04超声波测距模块详解STM32超声波测距

这个是全网最详细的STM32项目教学视频。 第一篇在这里: 视频在这里 STM32智能小车V3-STM32入门教程-openmv与STM32循迹小车-stm32f103c8t6-电赛 嵌入式学习 PID控制算法 编码器电机 跟随 15.1-超声波测距 完成超声波测距功能、测量数据显示在OLED屏幕上 硬件介绍 使用&#…

Creo装配体中只显示一部分零部件

从模型树中选中要显示的零部件&#xff0c;也可以结合Ctrl框选的方式选择对象。然后在模型树右击等会弹出选项&#xff0c;点选----即可

AD23中一些好用的功能

1.关闭在线DRC功能&#xff0c;可以避免布线时候一卡一卡的问题&#xff1a; 取消在线DRC的勾选&#xff1a; 2.AD的在线封装库&#xff0c;非常好用&#xff1a; 如何优雅地服用AD 21的在线元件库 – 吴川斌的博客 (mr-wu.cn) 3.如何恢复Altium Designer23默认窗口布局 打开…

了解MySQL中的存储过程,请看过来

引言 在数据库编程中&#xff0c;存储过程是一种强大的工具&#xff0c;它允许开发者封装复杂的逻辑&#xff0c;提高性能&#xff0c;并且增强安全性。本文将从基础概念讲起&#xff0c;逐步深入到存储过程的高级应用。 第一部分&#xff1a;存储过程基础 1. 存储过程简介 …

小红书推流机制底层逻辑

小红书推流机制底层逻辑 很多做运营的朋友问小红薯怎么玩❓ 小红书的核心逻辑流量是不是玄学❓ 今天就来说说小红书的流量算法机制&#x1f525; ①电脑审核 ②分配初始流量 ③增加流量 ④推荐结束

DINO中为什么教师模型用大图,学生模型用小图

在 DINO&#xff08;可以理解为由DIstillation和NO labels的缩写&#xff09;中&#xff0c;使用不同的图像裁剪策略对教师模型和学生模型进行训练有其特定的原因。具体来说&#xff0c;教师模型使用大图&#xff08;global views&#xff09;&#xff0c;学生模型则同时使用大…

鸿蒙OS开发:【一次开发,多端部署】(音乐专辑主页)

一多音乐专辑主页 介绍 本示例展示了音乐专辑主页。 头部返回栏: 因元素单一、位置固定在顶部&#xff0c;因此适合采用自适应拉伸&#xff0c;充分利用顶部区域。专辑封面: 使用栅格组件控制占比&#xff0c;在小尺寸屏幕下封面图与歌单描述在同一行。歌曲列表: 使用栅格组…

LVM和配额管理

文章目录 一、LVM1.1 LVM概述1.2 LVM的管理命令1.3 创建LVM的过程第一步&#xff1a;先创建物理卷第二步&#xff1a;创建逻辑卷组 / 扩容第三步&#xff1a;创建逻辑卷 / 扩容对ext4文件系统的管理 1.4 删除LVM 二、磁盘配额2.1 磁盘配额概述2.2 磁盘配额命令2.3 磁盘配额设置…

从ZooKeeper切换到ClickHouse-Keeper,藏着怎样的秘密

本文字数&#xff1a;7772&#xff1b;估计阅读时间&#xff1a;20 分钟 作者&#xff1a;博睿数据 李骅宸&#xff08;太道&#xff09;& 小叮当 本文在公众号【ClickHouseInc】首发 本系列前两篇内容&#xff1a; 从ES到ClickHouse&#xff0c;Bonree ONE平台更轻更快&a…

vue3学习(三)

前言 继续接上一篇笔记&#xff0c;继续学习的vue的组件化知识&#xff0c;可能需要分2个小节记录。前端大佬请忽略&#xff0c;也可以留下大家的鼓励&#xff0c;感恩&#xff01; 一、理解组件化 二、组件化知识 1、先上知识点&#xff1a; 2、示例代码 App.vue (主页面) …

认识 DECIMAL 类型

文章目录 1.作用2.实现原理参考文献 1.作用 为保证小数精度不丢失&#xff0c;数据库表使用 DECIMAL 类型&#xff0c;服务代码中使用&#xff0c;比如 Golang 第三方库 https://github.com/shopspring/decimal。接口协议可以使用 string 表示。 从 DB 存储&#xff0c;服务数…

力扣:541. 反转字符串 II

541. 反转字符串 II 给定一个字符串 s 和一个整数 k&#xff0c;从字符串开头算起&#xff0c;每计数至 2k 个字符&#xff0c;就反转这 2k 字符中的前 k 个字符。 如果剩余字符少于 k 个&#xff0c;则将剩余字符全部反转。如果剩余字符小于 2k 但大于或等于 k 个&#xff0…