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

React 通信:深层传递(Props、Context、Children Jsx)

在之前的文章 探讨:围绕 props 阐述 React 通信 中总结了关于“父子”组件传值,但是当需要在组件树中深层传递参数以及需要在组件间复用相同的参数时,传递 props 就会变得很麻烦。

实际案例: 下述展示有两种状态:① 详情态;② 编辑态(tag形式)

组件设计:通过 isDetailed 来决定是“详情”还是“编辑”。

在这里插入图片描述
开发过程:拆分了四层,根组件设置了 isDetailed 来确定最终确定 <ViolationGroup> 中展示。

 {data.map((item) =>isDetailed ? (<div>{item.disposeReasonName}</div>) : (<Tag bordered={false}>{item.disposeReasonName}</Tag>),)}
根组件
DetailViolationGroupList
Item
ViolationGroup

props 传递(逐层传递)

根组件设置 isDetailed,然后逐层传递。

在这里插入图片描述

☝️缺点:需要找到最近的父节点,“状态提升” 到太高的层级会导致“逐层传递props”的情况。

✌️优势:这样做可以让哪些组件用了哪些数据变得十分清晰!

在这里插入图片描述

context 传递(深层传递)

Context 使组件向其下方的整个树提供信息,会穿过中间的任何组件。子组件可以通过某种方式“访问”到组件树中某处在其上层的数据。

无需逐层透传,直接广播形式!需要的组件直接获取。

在这里插入图片描述

  1. 创建 一个 context。(可以将其命名为 IsDetailedContext)
export const IsDetailedContext = createContext(false);
  1. 在需要数据的组件内 使用 刚刚创建的 context。(ViolationGroup 将会使用 IsDetailedContext
 const isDetailed = useContext(IsDetailedContext);
  1. 在指定数据的组件中 提供 这个 context。 (根组件 将会提供 IsDetailedContext
<IsDetailedContext.Provider value={true}><DetailViolationGroupList violationGroupList={data?.detail?.violationGroupList}></DetailViolationGroupList>
</IsDetailedContext.Provider>

☝️缺点:对数据的抽离,导致理解成本略高。

✌️优势:许多组件需要相同的信息,避免通过许多中间组件向下传递 props(冗长)!

在这里插入图片描述

⚓ Context 的工作方式类似于 CSS 属性继承。在 React 中,覆盖来自上层的某些 context 的唯一方法是将子组件包裹到一个提供不同值的 context provider 中

包装成组件形式

定义:组件形式

/* context.js */
import { createContext, useContext } from 'react';export const IsDetailedContext = createContext(false);export const IsDetailedProvider = ({ children, isDetailed }) => {const originalIsDetailed = useContext(IsDetailedContext); // 原始默认值 falsereturn (<IsDetailedContext.Provider value={isDetailed ?? originalIsDetailed}>{children}</IsDetailedContext.Provider>);
};

使用方

<IsDetailedProvider isDetailed={true}><DetailViolationGroupListviolationGroupList={data?.detail?.violationGroupList}></DetailViolationGroupList>
</IsDetailedProvider>
知识点:空值合并运算符

🐾 空值合并运算符??)是一个逻辑运算符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。与逻辑或运算符(||)不同,逻辑或运算符会在左侧操作数为假值时返回右侧操作数。也就是说,如果使用 || 来为某些变量设置默认值,可能会遇到意料之外的行为。

'' ?? 1 // ''
'' || 1 // 1
0 ?? 1	// 0
0 || 1  // 1

与 state 结合

Context 不局限于静态值。如果在下一次渲染时传递不同的值,React 将会更新读取它的所有下层组件!可以和 state 结合使用。

children 传递(jsx)

抽象组件并将 JSX 作为 children 传递。

children
根组件
Item
ViolationGroup

上述示例,让 Itemchildren 当做一个参数,渲染 <Item><ViolationGroup isDetailed={true} /></Item>,然后去掉<DetailViolationGroupList> 层。这样就减少了定义数据的组件和使用数据的组件之间的层级。=> 直接在父组件中引用使用!

在这里插入图片描述

相关文章:

React 通信:深层传递(Props、Context、Children Jsx)

在之前的文章 探讨&#xff1a;围绕 props 阐述 React 通信 中总结了关于“父子”组件传值&#xff0c;但是当需要在组件树中深层传递参数以及需要在组件间复用相同的参数时&#xff0c;传递 props 就会变得很麻烦。 实际案例&#xff1a; 下述展示有两种状态&#xff1a;① 详…...

《Windows API每日一练》5.1 键盘基础

本节我们讲述关于键盘的一些基础知识。当我们按下一个键盘按键时&#xff0c;会产生一个键盘按键消息。这一点你能确定吗&#xff1f;假如是一个菜单快捷键消息&#xff0c;或者是一个子窗口控件消息呢&#xff1f;这就超出了本节讨论的范围&#xff0c;我们将在菜单和子窗口控…...

Class.forName()方法总结

Class.forName()方法总结 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;Class.forName()方法是Java反射机制中的一个重要方法&#xff0c;它用于动态加载类并返…...

Python | Leetcode Python题解之第168题Excel表列名称

题目&#xff1a; 题解&#xff1a; class Solution:def convertToTitle(self, columnNumber: int) -> str:ans list()while columnNumber > 0:columnNumber - 1ans.append(chr(columnNumber % 26 ord("A")))columnNumber // 26return "".join(an…...

【ARMv8/ARMv9 硬件加速系列 3.5.2 -- SVE 向量寄存器 有多少位数?】

文章目录 SVE 向量寄存器SVE 向量寄存器大小SVE 可伸缩性的好处SVE 寄存器长度示例SVE 向量寄存器 在 ARMv9 架构中,包括其 Scalable Vector Extension (SVE) 和 Scalable Vector Extension 2 (SVE2) 的增强,向量寄存器(通常称为 Z 寄存器)的大小设计为可伸缩的,以便在不…...

Vulkan入门系列2- 绘制三角形(未完待续)

概述&#xff1a; Vulkan的学习曲线是比较陡峭的&#xff0c;学习Vulkan刚开始像是在爬一个陡坡&#xff0c;等上了这个陡坡之后&#xff0c;后面学习曲线就相对比较平缓了。那么在Vulkan中绘制一个三角形&#xff0c;就相当于是在爬这样一个陡坡&#xff0c;因为绘制三角形需…...

企业UDP文件传输工具测速的方式(下)

在前一篇文章中&#xff0c;我们深入讨论了UDP传输的基本概念和镭速UDP文件传输工具如何使用命令行快速进行速度测试。现在&#xff0c;让我们进一步探索更为高级和灵活的方法&#xff0c;即通过整合镭速UDP的动态或静态库来实现网络速度的测量&#xff0c;以及如何利用这一过程…...

Artalk-CORS,跨域拦截问题

今天重新部署Artalk之后&#xff0c;遇到了CORS——跨域拦截的问题&#xff0c;卡了好一会记录一下。 起因 重新部署之后&#xff0c;浏览器一直提示CORS&#xff0c;之前在其他项目也遇到过类似的问题&#xff0c;原因就在于跨域问题。...

SSL证书怎样配置部署更安全?

在互联网上&#xff0c;SSL证书是用于加密网站与用户之间传输的数据的一种数字证书。它通过建立安全的连接&#xff0c;确保网站的身份和保护用户的隐私&#xff0c;是网站安全的重要组成部分。然而&#xff0c;要想让SSL证书发挥最大的作用&#xff0c;除了检查证书是否过期外…...

M1失效后,哪个是观察A股的关键新指标?

M1失效后&#xff0c;哪个是观察A股的关键新指标&#xff1f; 央地支出增速差&#xff08;地方-中央支出增速的差值&#xff09;或许是解释沪深300定价更有效的前瞻指标。该数值扩张&#xff0c;则有利于大盘指数&#xff0c;反之亦然&#xff0c;该指标从2017年至今对大盘指数…...

springboot集成积木报表,怎么将平台用户信息传递到积木报表

springboot集成积木报表后怎么将平台用户信息传递到积木报表 起因是因为需要研究在积木报表做数据筛选的时候需要拿到系统当前登录用户信息做筛选新的模块 起因是因为需要研究在积木报表做数据筛选的时候需要拿到系统当前登录用户信息做筛选 官网有详细介绍怎么集成进去的&…...

Spring Bean详解

Spring Bean作用域 默认情况下&#xff0c;所有的 Spring Bean 都是单例的&#xff0c;也就是说在整个 Spring 应用中&#xff0c; Bean 的实例只有一个 如果我们需要创建多个实例的对象&#xff0c;那么应该将 Bean 的 scope 属性定义为 prototype&#xff0c;如果 Spring 需…...

前端根据环境变量配置网页的title和favicon

前端根据环境变量配置网页的title和favicon 前言流程步骤一、设置environment文件二、在入口文件中配置三、删除index.html中的title和 icon link四、使用对应的打包命令进行部署 注意事项一、angular中&#xff0c;需要在angular.json添加favicon.ico额外的构建 前言 有些项目…...

服务器负载均衡

什么是服务器负载 1. 常见理解的平均负载 每次发现系统变慢时&#xff0c;我们通常做的第一件事&#xff0c;就是执行 top 或者 uptime 命令&#xff0c;来了解系统的负载情况。比如下列情况 [rootkube-node1 ~]# uptime09:44:37 up 74 days, 11:53, 1 user, load average:…...

如何设置Excel单元格下拉列表

如何设置Excel单元格下拉列表 在Excel中设置单元格下拉列表可以提高数据输入的准确性和效率。以下是创建下拉列表的步骤&#xff1a; 使用数据验证设置下拉列表&#xff1a; 1. 选择单元格&#xff1a; 选择你想要设置下拉列表的单元格或单元格区域。 2. 打开数据验证&…...

红队内网攻防渗透:内网渗透之Linux内网权限提升技术:LXDDockerRbash限制型bash

红队内网攻防渗透 1. 内网权限提升技术1.1 Linux系统提权-普通用户-LXD容器1.2 Linux系统提权-普通用户-Docker容器1.3 权限在docker里面1.4 Linux系统提权-普通用户-Rbash限制型bash1. 内网权限提升技术 利用参考 https://gtfobins.github.io/LXD、LXC 和 Docker 是三种不同…...

【笔记】复制Edge的网址粘贴后自动变成中文标题超链接

问题 1、从edge复制的网址粘贴直接显示网页内容名称而不是网址url。 2、复制任何网址粘贴到CSDN里面粘贴时直接转换成标题超链接&#xff08;很讨厌的功能习惯&#xff09;。 而如上两种问题不是互相影响的&#xff0c;就算设置了Edge的粘贴方式&#xff0c;复制到CSDN的文章…...

HTML5和CSS3总结

HTML5 HTML5是最新的HTML标准&#xff0c;它的主要目标是提供所有内容而不需要任何像flash&#xff0c;silverlight等的额外插件&#xff0c;这些内容来自动画、视频、富GUI等。HTML5是万维网联盟&#xff08;W3C&#xff09;和网络超文本应用技术工作组&#xff08;WHATWG&am…...

探索数据分析无限潜能:vividime Desktop助力企业智能决策

在数字化浪潮席卷全球的今天&#xff0c;数据已经成为企业最宝贵的资产之一。通过对海量数据的深度挖掘和分析&#xff0c;企业能够洞察市场趋势、优化运营流程、提升用户体验&#xff0c;从而在激烈的市场竞争中脱颖而出。永洪科技的vividime Desktop作为一款功能强大、操作简…...

gitee添加别人的仓库后,在该仓库里添加文件夹/文件

一、在指定分支里添加文件夹&#xff08;如果库主没有创建分支&#xff0c;自己还要先创建分支&#xff09; eg:以在一个项目里添加视图文件为例&#xff0c;用Echarts分支在usr/views目录下添加Echarts文件夹&#xff0c;usr/views/Echarts目录下添加index.vue 1.切换为本地仓…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画!!!

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...