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

React useContext

useContext 允许父组件向其下层无论多深的任何组件提供信息,而无需通过 props 显式传递。

// 1. LevelContext.js  创建 context,将其从文件中导出 
import { createContext } from 'react';
export const LevelContext = createContext(1);// 2. Section.jsx  提供 context 
import { LevelContext } from './LevelContext.js';
export default function Section({ level, children }) {return (<section className="section"><LevelContext.Provider value={level}>{children}</LevelContext.Provider></section>);
}// 3. Heading.jsx 使用 Context 
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';
export default function Heading({ children }) {const level = useContext(LevelContext);switch (level) {case 1:return <h1>{children}</h1>;case 2:return <h2>{children}</h2>;case 3:return <h3>{children}</h3>;default:throw Error('未知的 level:' + level);}
}// App.jsx
import Heading from './Heading.js';
import Section from './Section.js';
export default function Page() {return (<Section level={1}><Heading>主标题</Heading><Section level={2}><Heading>副标题</Heading><Heading>副标题</Heading><Heading>副标题</Heading><Section level={3}><Heading>子标题</Heading><Heading>子标题</Heading><Heading>子标题</Heading></Section></Section></Section>);
}

组件会使用 UI 树中在它上层最近的那个 <LevelContext.Provider> 传递过来的值。不是同级,也不是更远的层级。

相关文章:

React useContext

useContext 允许父组件向其下层无论多深的任何组件提供信息&#xff0c;而无需通过 props 显式传递。 // 1. LevelContext.js 创建 context&#xff0c;将其从文件中导出 import { createContext } from react; export const LevelContext createContext(1);// 2. Section.j…...

【尚庭公寓SpringBoot + Vue 项目实战】用户管理(十五)

【尚庭公寓SpringBoot Vue 项目实战】用户管理&#xff08;十五&#xff09; 文章目录 【尚庭公寓SpringBoot Vue 项目实战】用户管理&#xff08;十五&#xff09;1、业务介绍2、接口实现2.1、根据条件分页查询用户列表2.2、根据ID更新用户状态 1、业务介绍 用户管理共包含两…...

laravel中如何向字段标签添加工具提示

首先&#xff0c;您可以使用 轻松自定义字段标签->label()。我相信您知道这一点。但您知道吗……标签输出未转义&#xff1f;这意味着您也可以在标签中包含 HTML。 为了尽快实现上述目标&#xff0c;我只是采取了一个快速而粗糙的解决方案&#xff1a; CRUD::field(nickna…...

高考志愿填报,选专业应该考虑哪些因素?

这是一个复杂的社会&#xff0c;各种影响就业的因素层出不穷&#xff0c;也从未断绝。对于高考生而言&#xff0c;高考刚结束&#xff0c;短暂的放松后&#xff0c;就必须考虑自身以后应该就读什么专业&#xff0c;如果不对就读专业进行评估&#xff0c;仔细挑选&#xff0c;毕…...

图书管理系统代码(Java)

1、运行演示 QQ2024528-205028-HD 详细讲解在这篇博客&#xff1a;JavaSE&#xff1a;图书管理系统-CSDN博客 2、所建的包 3、Java代码 3.1 book包 3.1.1 Book类代码 package book;/*** Created with IntelliJ IDEA.* Description:* User: dings* Date: 2024-05-13* Time:…...

Nginx反向代理Kingbase数据库

本文适用于开发人员学习运维领域知识&#xff0c;主要内容为在个人理解的基础上对企业级开发中所使用的Nginx和数据库kingbase相关使用&#xff0c;并附上Nginx反向代理kingbase数据库的相关配置的操作方式&#xff0c;感谢阅读 为什么是nginx代理kingbase数据库服务端 生产环…...

没有字幕的高清爆款视频素材去哪里找?无字幕无水印素材网站分享

在寻找无水印高清视频素材的道路上感到困惑&#xff1f;欢迎来到今天的分享&#xff0c;我将为您介绍一些海外优质的素材网站&#xff0c;以及国内极具特色的“蛙学府”。不论您是短视频制作的新手还是老手&#xff0c;这些网站都将为您的创意注入新活力。 蛙学府网 蛙学府网不…...

Java23种设计模式(一)

前言 这2个月来&#xff0c;重新出发&#xff0c;从java开发需要的数据库、查询日志工具、开发工具等的安装、环境配置&#xff0c;再到后面的基础学习、数据库学习、扩展学习&#xff08;maven、mq、设计模式、spring 系列等等&#xff09;&#xff0c;边学边记录&#xff0c…...

Spring Boot集成websocket实现webrtc功能

1.什么是webrtc&#xff1f; WebRTC 是 Web 实时通信&#xff08;Real-Time Communication&#xff09;的缩写&#xff0c;它既是 API 也是协议。WebRTC 协议是两个 WebRTC Agent 协商双向安全实时通信的一组规则。开发人员可以通过 WebRTC API 使用 WebRTC 协议。目前 WebRTC…...

StableSwarmUI 安装教程(详细)

文章目录 背景特点安装 背景 StableSwarmUI是StabilityAI官方开源的一个文生图工作流UI&#xff0c;目前处于beta阶段&#xff0c;但主流程是可以跑通的。该UI支持接入ComfyUI、Stable Diffusion-WebUI。其工作原理就是使用ComfyUI、Stable Diffusion-WebUI或者StabilityAI官方…...

利用Unity XR交互工具包实现简易VR菜单控制——6.18山大软院项目实训

初始设置 在Unity项目中&#xff0c;首先需要确保安装了XR插件和XR交互工具包。这些工具包提供了对VR硬件的支持&#xff0c;以及一系列用于快速开发VR交互的组件和预设。 脚本概览 本示例中的menuController脚本附加在一个Unity GameObject上&#xff0c;这个脚本负责监听用…...

区间预测 | Matlab实现CNN-ABKDE卷积神经网络自适应带宽核密度估计多变量回归区间预测

区间预测 | Matlab实现CNN-ABKDE卷积神经网络自适应带宽核密度估计多变量回归区间预测 目录 区间预测 | Matlab实现CNN-ABKDE卷积神经网络自适应带宽核密度估计多变量回归区间预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现CNN-ABKDE卷积神经网络自适应…...

【机器学习】第6章 支持向量机(SVM)

一、概念 1.支持向量机&#xff08;support vector machine&#xff0c;SVM&#xff09;&#xff1a; &#xff08;1&#xff09;基于统计学理论的监督学习方法&#xff0c;但不属于生成式模型&#xff0c;而是判别式模型。 &#xff08;2&#xff09;支持向量机在各个领域内的…...

hive笔记

文章目录 1. 如何增加列2. 如何查看表的具体列的数据类型3. 如何drop一个表 1. 如何增加列 alter table your_table_name add columns (your_column_name varchar(255));2. 如何查看表的具体列的数据类型 DESCRIBE your_table_name3. 如何drop一个表 drop table your_table_…...

kali - 配置静态网络地址 + ssh 远程连接

文章目录 观前提示&#xff1a;本环境在 root 用户下kali 配置静态网络地址打开网络配置文件 kali 配置 ssh 远程连接 观前提示&#xff1a;本环境在 root 用户下 kali 配置静态网络地址 打开网络配置文件 vim /etc/network/interfaces出现一下内容 # This file describes …...

Redis常见数据类型及其常用命令详解

文章目录 一、Redis概述二、Redis常用命令1.通用命令1.1 KEYS&#xff1a;查看符合模板的所有 key1.2 DEL&#xff1a;删除一个指定的 key1.3 EXISTS&#xff1a;判断 key 是否存在1.4 EXPIRE&#xff1a;给一个 key 设置有效期&#xff0c;有效期到期时该 key 会被自动删除1.5…...

JMU 数科 数据库与数据仓库期末总结(4)实验设计题

E-R图 实体-关系图 E-R图的组成要素主要包括&#xff1a; 实体&#xff08;Entity&#xff09;&#xff1a;实体代表现实世界中可相互区别的对象或事物&#xff0c;如顾客、订单、产品等。在图中&#xff0c;实体通常用矩形表示&#xff0c;并在矩形内标注实体的名称。 属性…...

Go版RuoYi

RuoYi-Go(DDD) 1. 关于我(在找远程工作&#xff0c;给机会的老板可以联系) 个人介绍 2. 后端 后端是用Go写的RuoYi权限管理系统 (功能正在持续实现) 用DDD领域驱动设计(六边形架构)做实践 后端 GitHub地址 后端 Gitee地址 3. 前端 本项目没有自研前端&#xff0c;前端代…...

八股系列 Flink

Flink 和 SparkStreaming的区别 设计理念方面 SparkStreaming&#xff1a;使用微批次来模拟流计算&#xff0c;数据已时间为单位分为一个个批次&#xff0c;通过RDD进行分布式计算 Flink&#xff1a;基于事件驱动&#xff0c;是面向流的处理框架&#xff0c;是真正的流式计算…...

HTTP/2 协议学习

HTTP/2 协议介绍 ​ HTTP/2 &#xff08;原名HTTP/2.0&#xff09;即超文本传输协议 2.0&#xff0c;是下一代HTTP协议。是由互联网工程任务组&#xff08;IETF&#xff09;的Hypertext Transfer Protocol Bis (httpbis)工作小组进行开发。是自1999年http1.1发布后的首个更新。…...

Qwen3.5-4B-Claude-Opus保姆级教程:Web界面响应延迟归因与优化路径

Qwen3.5-4B-Claude-Opus保姆级教程&#xff1a;Web界面响应延迟归因与优化路径 1. 模型与部署环境概览 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是基于Qwen3.5-4B的推理蒸馏模型&#xff0c;特别强化了结构化分析、分步骤回答以及代码与逻辑类问题的处理能力。该…...

如何用PPTist快速创建专业演示文稿:免费在线PPT制作完全指南

如何用PPTist快速创建专业演示文稿&#xff1a;免费在线PPT制作完全指南 【免费下载链接】PPTist 基于 Vue3.x TypeScript 的在线演示文稿&#xff08;幻灯片&#xff09;应用&#xff0c;还原了大部分 Office PowerPoint 常用功能&#xff0c;实现在线PPT的编辑、演示。支持导…...

若依框架单点登录!!!

一、不分离版在application.yml设置maxSession为1即可。修改shiro的配置shiro:session:# 同一个用户最大会话数&#xff0c;比如2的意思是同一个账号允许最多同时两个人登录&#xff08;默认-1不限制&#xff09;maxSession: 1# 踢出之前登录的/之后登录的用户&#xff0c;默认…...

答辩 PPT 不用熬!PaperXie AI PPT 让毕业论文答辩赢在 “门面”

paperxie-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/AIPPThttps://www.paperxie.cn/ppt/createhttps://www.paperxie.cn/ppt/create 又到毕业冲刺季&#xff0c;当论文终于敲下最后一个句号&#xff0c;毕业论文答辩 PPT却成了新的 “熬夜重灾区”&#xff1a…...

企业级流程引擎如何重塑低代码开发?基于Vite+Vue3的可视化建模实践

企业级流程引擎如何重塑低代码开发&#xff1f;基于ViteVue3的可视化建模实践 【免费下载链接】vite-vue-bpmn-process 基于 Vite TypeScript Vue3 NaiveUI Bpmn.js 的流程编辑器&#xff08;前端部分&#xff09;。支持高度自定义&#x1f680;&#x1f680;&#x1f680;。…...

终极Windows 11安装指南:3分钟轻松绕过硬件检测限制

终极Windows 11安装指南&#xff1a;3分钟轻松绕过硬件检测限制 【免费下载链接】MediaCreationTool.bat Universal MCT wrapper script for all Windows 10/11 versions from 1507 to 21H2! 项目地址: https://gitcode.com/gh_mirrors/me/MediaCreationTool.bat 还在为…...

一条命令搞定STM32程序下载:OpenOCD program命令的隐藏用法与避坑指南

STM32极速烧录秘籍&#xff1a;OpenOCD program命令高阶玩法全解析 每次调试STM32都要重复点击IDE的下载按钮&#xff1f;CI/CD流水线卡在烧录环节&#xff1f;是时候解锁OpenOCD的program命令了——这个被低估的"瑞士军刀"能让你用一行命令完成擦除、烧录、校验、复…...

保姆级教程:在Windows 11上为PyTorch配置CUDA 12.x和cuDNN(含环境变量疑难杂症排查)

Windows 11深度学习环境配置全攻略&#xff1a;从CUDA安装到PyTorch GPU加速实战 每次打开PyCharm准备大展身手时&#xff0c;看到那个令人心碎的False——torch.cuda.is_available()的输出结果&#xff0c;是不是感觉整个深度学习梦想都被泼了冷水&#xff1f;别担心&#xf…...

Revit插件开发效率革命:热重载技术如何彻底改变你的开发流程

Revit插件开发效率革命&#xff1a;热重载技术如何彻底改变你的开发流程 【免费下载链接】RevitAddInManager Revit AddinManager update .NET assemblies without restart Revit for developer. 项目地址: https://gitcode.com/gh_mirrors/re/RevitAddInManager RevitA…...

NaViL-9B多模态提示词工程:提升图文理解准确率的10个实用技巧

NaViL-9B多模态提示词工程&#xff1a;提升图文理解准确率的10个实用技巧 1. 认识NaViL-9B多模态模型 NaViL-9B是一款原生支持多模态交互的大语言模型&#xff0c;能够同时处理文本和图像输入。与传统的纯文本模型不同&#xff0c;它可以直接"看懂"图片内容&#x…...