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

React第十节组件之间传值之context

1、Context 使用creatContext() 和 useContext() Hook 实现多层级传值

概述:
在我们想要每个层级都需要某一属性,或者祖孙之间需要传值时,我们可以使用 props 一层一层的向下传递,或者我们使用更便捷的方案,用 creatContext() 和 useContext() 进行隔代之间传值,这种情况下,我们只需要在使用的组件中书写,而不用每一层级都进行书写

使用中注意事项
a、必须使用 Provider 组件,必须使用 value 接收要传递的 属性:
b、下级会向上找最近 的 Provider 获取其传入的 value
c、传入的 value 可以是任意类型的属性

extport default function MyPar(){return(<><MyCom.Provider value={属性}></MyCom.Provider></>)
}

1.1、基本用法实现上下级数据共享

首先创建通用 ComContext文件

import { createContext } from "react";
// 创建一个 UserInfoContext 组件
export const UserInfoContext = createContext()

其次创建最终使用组件 UserInfo

import {useContext} from 'react'
import { UserInfoContext } from './ComContext'
export default function UseInfo() {// 通过 useContext Hook 接收上级 UserInfoContext 传入的内容,总是获取距离最近的 Provider 的 value 值const userInfo = useContext(UserInfoContext)console.log('==userInfo===', userInfo)return (<div><h3>用户信息</h3><p>名称:{userInfo.name}</p><p>年龄:{userInfo.age}</p></div>)
}

最后在父组件中调用上面两个组件

import { UserInfoContext } from './ComContext'
import UseInfo from './UseInfo'
export default function MyContext2() {const userInfo = {name: 'Andy',age: 18}return (<><h2>第一级:</h2>{/* 将普通对象传给下级 */}<UserInfoContext.Provider value={userInfo}>{/* 这里 不管写多少个 UseInfo 组件,都可以接收到 传入的 userInfo 对象 */}<UseInfo></UseInfo><UseInfo></UseInfo><UseInfo></UseInfo></UserInfoContext.Provider></>)
}

1.2、Context 与 useState() 使用

通过 useState() 动态修改 userInfo 数据,

import { useState} from 'react'
import { UserInfoContext } from './ComContext'
import UseInfo from './UseInfo'
export default function MyContext2() {const [userInfo, setUseInfo] = useState({name: 'Andy',age: 18})const hanldeChangeUserInfo = () => {setUseInfo({...userInfo, name: `${userInfo.name} + 1`})}return (<><h2>第一级:</h2><button onClick={hanldeChangeUserInfo}>修改name</button><UserInfoContext.Provider value={userInfo}>{/* 在下级接收的 userInfo 会实时更新 */}<UseInfo></UseInfo></UserInfoContext.Provider></>)
}

1.3、Context 树形结构示例

文件目录

在这里插入图片描述

声明levelContext文件

import { createContext } from "react";
export const LevelContext = createContext(0)

声明 HeadTitle文件

import  { useContext } from 'react'
import { LevelContext } from "./LevelContext";
export default function HeadTitle({children}) {//  使用 LevelContextconst level = useContext(LevelContext){switch(level) {case 1:return <h1>{`第${level}级`}</h1>case 2:return <h2>{`第${level}级`}</h2>case 3:return <h3>{`第${level}级`}</h3>case 4:return <h4>{`第${level}级`}</h4>case 5:return <h5>{`第${level}级`}</h5>}}
}

声明 ContMain 文件

这里使用 nanoid 插件,生成随机id,需要自行安装 yarn add nanoid

import React, { useContext } from 'react'
import HeadTitle from './HeadTitle'
import { LevelContext } from './LevelContext'
import { nanoid } from 'nanoid';
import './index.scss'
export default function ContMain({children}) {const level = useContext(LevelContext)return (<div className="container">{ children && children.length && children?.map((item, index) => <>// 这样 HeadTitle 组件中才能获取到 value 值<LevelContext.Provider key={`${nanoid()}4444`} value={item.level} ><HeadTitle ></HeadTitle><p>姓名:{item.name}</p><p>年龄:{item.age}</p>{item && item?.children && item?.children.length && (<div style={{marginLeft: `${item.level * 20}px`}}>// 自调用当前组件<ContMain>{[...item.children]}</ContMain></div>) }</LevelContext.Provider></>)}</div>)
}

声明index 文件

import ContMain from './ContMain'
import { userInfoArr } from './mock.js'
import { LevelContext } from './LevelContext'
export default function MyContext3() {return (<><h1>父级</h1><LevelContext.Provider value={1}><ContMain >{[...userInfoArr]}</ContMain></LevelContext.Provider></>)
}

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

相关文章:

React第十节组件之间传值之context

1、Context 使用creatContext() 和 useContext() Hook 实现多层级传值 概述&#xff1a; 在我们想要每个层级都需要某一属性&#xff0c;或者祖孙之间需要传值时&#xff0c;我们可以使用 props 一层一层的向下传递&#xff0c;或者我们使用更便捷的方案&#xff0c;用 creatC…...

flink中barrier不对齐的原因和影响

Barrier 不对齐&#xff08;Barrier Misalignment&#xff09;可能导致一些性能和一致性相关的问题&#xff0c;但 Flink 提供了机制来确保即使在不对齐的情况下&#xff0c;也可以保证数据的一致性。 1. 什么是 Barrier 不对齐&#xff1f; Barrier 不对齐是指在分布式数据流…...

软银集团孙正义再度加码OpenAI,近屿智能专注AI人才培养

11月28日凌晨&#xff0c;全球最大财经CNBC报道&#xff0c;软银集团创始人兼CEO孙正义再次向人工智能领域的领军企业OpenAI投资了15亿美元。软银对OpenAI的投资已不是首次。就在上个月&#xff0c;软银已在OpenAI的上一轮融资中注入了5亿美元的资金。但他一直寻求获得OpenAI更…...

麒麟系统x86安装达梦数据库

一、安装准备前工作 操作系统&#xff1a;银河麒麟V10&#xff0c;CPU&#xff1a; x86_64 架构 下载地址&#xff0c;麒麟官网&#xff1a;https://www.kylinos.cn/ 数据库&#xff1a;dm8_20220915_x86_kylin10_64 下载地址&#xff0c;达梦数据库官网&#xff1a;https://…...

Java中的“多态“详解

多态&#xff08;Polymorphism&#xff09;是面向对象编程&#xff08;OOP&#xff09;中的一个核心概念&#xff0c;它允许同一个接口或方法在不同对象上具有不同的实现方式。多态性使得程序在运行时可以根据对象的实际类型来决定调用哪个方法&#xff0c;从而提高代码的灵活性…...

buuctf-[SUCTF 2019]EasySQL 1解题记录

把你的旗帜给我&#xff0c;我会告诉你这面旗帜是对的。 堆叠注入查询数据库 1; show databases; ​ 查询表名 1; show tables; 获取flag 1;set sql_modepipes_as_concat;select 1...

ASP.NET Core 入门

使用 .NET CLI 创建并运行 ASP.NET Core Web 应用。 文章目录 一、先决条件二、创建Web应用项目三、运行应用四、编辑Razor页面 一、先决条件 .NET 8.0 SDK 二、创建Web应用项目 打开命令行界面&#xff0c;然后输入以下命令&#xff1a; dotnet new webapp --output aspne…...

php反序列化1_常见php序列化的CTF考题

声明&#xff1a; 以下多内容来自暗月师傅我是通过他的教程来学习记录的&#xff0c;如有侵权联系删除。 一道反序列化的CTF题分享_ctf反序列化题目_Mr.95的博客-CSDN博客 一些其他大佬的wp参考&#xff1a;php_反序列化_1 | dayu’s blog (killdayu.com) 序列化一个对象将…...

题目 1013: [编程入门]Sn的公式求和

题目 1013: [编程入门]Sn的公式求和 [编程入门]Sn的公式求和 求Snaaaaaa…aa…aaa&#xff08;有n个a&#xff09;之值&#xff0c;其中a是一个数字&#xff0c;为2。 例如&#xff0c;n5时222222222222222&#xff0c;n由键盘输入。 #include<stdio.h> int A(int n)…...

算法——赎金信(leetcode383)

题目&#xff1a; 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。 magazine 中的每个字符只能在 ransomNote 中使用一次。 示例 1&#…...

transformers训练(NLP)阅读理解(多项选择)

简介 在阅读理解任务中&#xff0c;有一种通过多项选择其中一个答案来训练机器的阅读理解。比如&#xff1a;给定一个或多个文档h,以及一个问题S和对应的多个答案候选&#xff0c;输出问题S的答案E&#xff0c;E是答案候选中的某一个选项。 这样的目的就是通过文档&#xff0c…...

微软企业邮箱:安全可靠的企业级邮件服务!

微软企业邮箱的设置步骤&#xff1f;如何注册使用烽火域名邮箱&#xff1f; 微软企业邮箱作为一款专为企业设计的邮件服务&#xff0c;不仅提供了高效便捷的通信工具&#xff0c;更在安全性、可靠性和功能性方面树立了行业标杆。烽火将深入探讨微软企业邮箱的多重优势。 微软…...

什么是分布式锁

定义 分布式锁是控制分布式系统或集群中不同节点对共享资源访问的一种机制。在分布式环境下&#xff0c;多个节点&#xff08;如多个服务器或多个进程&#xff09;可能会同时访问诸如数据库中的某条记录、一个共享文件或者一个全局计数器等共享资源。分布式锁的目的是确保在同一…...

【含开题报告+文档+PPT+源码】基于SpringBoot的艺术培训学校管理系统的设计与实现

开题报告 艺术培训学校管理在现代教育行业中发挥着至关重要的作用&#xff0c;旨在为学员提供及时、专业且高效的课程服务&#xff0c;同时也激励培训机构不断提升教学质量与管理水平。然而&#xff0c;传统的艺术培训学校管理模式常面临一系列挑战&#xff0c;如课程报名程序…...

【网络安全 | 漏洞挖掘】绕过SAML认证获得管理员面板访问权限

未经许可,不得转载。 文章目录 什么是SAML认证?SAML是如何工作的?SAML响应结构漏洞结果什么是SAML认证? SAML(安全断言标记语言)用于单点登录(SSO)。它是一种功能,允许用户在多个服务之间切换时无需多次登录。例如,如果你已经登录了facebook.com,就不需要再次输入凭…...

Flutter:列表分页,上拉加载下拉刷新,在GetBuilder模板使用方式

GetBuilder模板使用方式参考上一节 本篇主要代码记录如何使用上拉加载下拉刷新&#xff0c; 接口请求和商品组件的代码不包括在内 pubspec.yaml装包 cupertino_icons: ^1.0.8# 分页 上拉加载&#xff0c;下拉刷新pull_to_refresh_flutter3: 2.0.2商品列表&#xff1a;controlle…...

硬件基础22 反馈放大电路

目录 一、反馈的基本概念与分类 1、什么是反馈 2、直流反馈与交流反馈 3、正反馈与负反馈 4、串联反馈与并联反馈 5、电压反馈与电流反馈 二、负反馈四种组态 1、电压串联负反馈放大电路 2、电压并联负反馈放大电路 3、电流串联负反馈放大电路 4、电流并联负反馈放大…...

挑战用React封装100个组件【001】

项目地址 https://github.com/hismeyy/react-component-100 组件描述 组件适用于需要展示图文信息的场景&#xff0c;比如产品介绍、用户卡片或任何带有标题、描述和可选图片的内容展示 样式展示 代码展示 InfoCard.tsx import ./InfoCard.cssinterface InfoCardProps {ti…...

linux高级系统编程之进程

进程 一个正在进行的程序 并行与并发 并行:执行的程序在不同CPU上同时执行 并发:一个CPU,多个进程交替执行,因为交替速度很快,所以从宏观上来看是同时执行的,但是从围观的角度是交替执行的 单道与多道 单道程序设计:所有进程一个一个排队执行,若A阻塞,B只能等待,,即使CPU处于空…...

nextjs+nestjs+prisma写todolist全栈项目

技术栈 nextjsnestjsprisma所学知识 Nextjs组件渲染,状态,路由docker启动Mysql容器prisma操作Mysql(CRUD)允许跨域请求APITanStack Query异步状态管理fetch api服务器组件预请求数据nestjs 管道和异常处理检测id是否正整数Docker启动Mysql容器 compose.yml name: todoLis…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...