当前位置: 首页 > 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.切换为本地仓…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...