React 生成传递给无障碍属性的唯一 ID
useId()
在组件的顶层调用 useId 生成唯一 ID：
import { useId } from 'react'; function PasswordField() {
const passwordHintId = useId();
// ...
参数
useId 不带任何参数。
返回值
useId 返回一个唯一的字符串 ID，与此特定组件中的 useId 调用相关联。
注意事项
useId是一个 Hook，因此你只能 在组件的顶层 或自己的 Hook 中调用它。你不能在内部循环或条件判断中调用它。如果需要，可以提取一个新组件并将 state 移到该组件中。useId不应该被用来生成列表中的 key。key 应该由你的数据生成。
用法
为无障碍属性生成唯一 ID
在组件的顶层调用 useId 生成唯一 ID：
import { useId } from 'react';function PasswordField() {const passwordHintId = useId();// ...
你可以将 生成的 ID 传递给不同的属性：
<><input type="password" aria-describedby={passwordHintId} /><p id={passwordHintId}>
</>
让我们通过一个例子，看看这个什么时候有用。
如 aria-describedby 这样的 HTML 无障碍属性 允许你指定两个标签之间的关系。例如，你可以指定一个元素（比如输入框）由另一个元素（比如段落）描述。
在常规的 HTML 中，你会这样写：
<label>密码:<inputtype="password"aria-describedby="password-hint"/></label>
<p id="password-hint">密码应该包含至少 18 个字符
</p>
然而，在 React 中直接编写 ID 并不是一个好的习惯。一个组件可能会在页面上渲染多次，但是 ID 必须是唯一的！不要使用自己编写的 ID，而是使用 useId 生成唯一的 ID。
import { useId } from 'react';function PasswordField() {const passwordHintId = useId();return (<><label>密码:<inputtype="password"aria-describedby={passwordHintId}/></label><p id={passwordHintId}>密码应该包含至少 18 个字符</p></>);
}
现在，即使 PasswordField 多次出现在屏幕上，生成的 ID 并不会冲突。
import { useId } from 'react';function PasswordField() {const passwordHintId = useId();return (<><label>密码:<inputtype="password"aria-describedby={passwordHintId}/></label><p id={passwordHintId}>密码应该包含至少 18 个字符</p></>);
}export default function App() {return (<><h2>输入密码</h2><PasswordField /><h2>验证密码</h2><PasswordField /></>);
}
为多个相关元素生成 ID
如果你需要为多个相关元素生成 ID，可以调用 useId 来为它们生成共同的前缀：
import { useId } from 'react';export default function Form() {const id = useId();return (<form><label htmlFor={id + '-firstName'}>名字：</label><input id={id + '-firstName'} type="text" /><hr /><label htmlFor={id + '-lastName'}>姓氏：</label><input id={id + '-lastName'} type="text" /></form>);
}可以使你避免为每个需要唯一 ID 的元素调用 useId。
为所有生成的 ID 指定共享前缀
如果你在单个页面上渲染多个独立的 React 应用程序，请在 createRoot 或 hydrateRoot 调用中将 identifierPrefix 作为选项传递。这确保了由两个不同应用程序生成的 ID 永远不会冲突，因为使用 useId 生成的每个 ID 都将以你指定的不同前缀开头。
index.html
<!DOCTYPE html>
<html><head><title>My app</title></head><body><div id="root1"></div><div id="root2"></div></body>
</html>App.js
import { useId } from 'react';function PasswordField() {const passwordHintId = useId();console.log('生成的 ID：', passwordHintId)return (<><label>密码:<inputtype="password"aria-describedby={passwordHintId}/></label><p id={passwordHintId}>密码应该包含至少 18 个字符</p></>);
}export default function App() {return (<><h2>输入密码</h2><PasswordField /></>);
}index.js
import { createRoot } from 'react-dom/client';
import App from './App.js';
import './styles.css';const root1 = createRoot(document.getElementById('root1'), {identifierPrefix: 'my-first-app-'
});
root1.render(<App />);const root2 = createRoot(document.getElementById('root2'), {identifierPrefix: 'my-second-app-'
});
root2.render(<App />);
useId – React 中文文档 (docschina.org)
相关文章：
React 生成传递给无障碍属性的唯一 ID
useId() 在组件的顶层调用 useId 生成唯一 ID： import { useId } from react; function PasswordField() { const passwordHintId useId(); // ...参数 useId 不带任何参数。 返回值 useId 返回一个唯一的字符串 ID，与此特定组件中的 useI…...
十种排序算法(1) - 准备测试函数和工具
1.准备工作 我们先写一堆工具，后续要用，不然这些写在代码里可读性巨差 #pragma once #include<stdio.h>//为C语言定义bool类型 typedef int bool; #define false 0 #define true 1//用于交互a和b inline void swap(int* a, int* b) {/*int c *a…...
IRF联动 BFD-MAD
文章目录 IRF堆叠一、主设备配置二、备设备配置三、验证 MAD检测一、MAD检测二、MAD验证 本实验以2台设备进行堆叠示例，按照配置顺序，先配置主设备，再配置备设备。在IRF配置前暂时先不接堆叠线，按步骤提示接线。 IRF堆叠 一、主设…...
双向链表的初步练习
𝙉𝙞𝙘𝙚!!👏🏻‧✧̣̥̇‧✦👏🏻‧✧̣̥̇‧✦ 👏🏻‧✧̣̥̇: Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - ：来于“云”的“羽球人”…...
IDE的组成
集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务…...
项目解读_v2
1. 项目介绍 如果使用task2-1作为示例时， 运行process.py的过程中需要确认 process调用的是函数 preprocess_ast_wav2vec(wav, fr) 1.1 任务简介 首个开源的儿科呼吸音数据集， 通过邀请11位医师标注； 数字听诊器的采样频率和量化分辨率分…...
杀毒软件哪个好，杀毒软件有哪些
安全杀毒软件是一种专门用于检测、防止和清除计算机病毒、恶意软件和其他安全威胁的软件。这类软件通常具备以下功能： 1. 实时监测：通过实时监测计算机系统，能够发现并防止病毒、恶意软件等安全威胁的入侵。 2. 扫描和清除：可以…...
Ubuntu上安装配置Nginx
要在 Ubuntu 上安装 Nginx，请按照以下步骤进行操作： 打开终端：可以使用快捷键 Ctrl Alt T 打开终端，或者在开始菜单中搜索 “Terminal” 并点击打开。 更新软件包列表：在终端中运行以下命令，以确保软件包…...
C++之string
C之string #include <iostream>using namespace std;/*string();//创建一个空的字符串string(const char* s);//使用字符串s初始化string(const string& str);//使用一个string对象初始化另外一个string对象string(int n,char c);//使用n个字符c初始化*/void test1()…...
多线程---单例模式
文章目录 什么是单例模式？饿汉模式懒汉模式版本一：最简单的懒汉模式版本二：考虑懒汉模式存在的线程安全问题版本三：更完善的解决线程安全问题版本四：解决指令重排序问题 什么是单例模式？ 单例模式…...
SpringBoot相比于Spring的优点（自动配置和依赖管理）
自动配置 例子见真章 我们先看一下我们Spring整合Druid的过程，以及我们使用SpringBoot整合Druid的过程我们就知道我们SpringBoot的好处了。 Spring方式 Spring方式分为两种，第一种就是我们使用xml进行整合，第二种就是使用我们注解进行简化…...
SAP SPAD新建打印纸张
SAP SPAD新建打印纸张 1.事务代码SPAD 2.完全管理－设备类型－页格式-显示(创建格式页) 3.按标准A4纸张为模板参考创建。同一个纸张纵向/横向各创建1次(创建格式页) 4.完全管理－设备类型－格式类型-显示(创建格式类型࿰…...
C# 图解教程 第5版 —— 第11章 结构
文章目录 11.1 什么是结构11.2 结构是值类型11.3 对结构赋值11.4 构造函数和析构函数11.4.1 实例构造函数11.4.2 静态构造函数11.4.3 构造函数和析构函数小结 11.5 属性和字段初始化语句11.6 结构是密封的11.7 装箱和拆箱（*）11.8 结构作为返回值和参数11…...
车载电子电器架构 —— 基于AP定义车载HPC
我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 屏蔽力是信息过载时代一个人的特殊竞争力，任何消耗你的人和事，多看一眼都是你的不对。非必要不费力证明自己，无利益不试图说服别人，是精神上的节…...
Redis原理-IO模型和持久化
高性能IO模型 为什么单线程Redis能那么快 一方面，Redis 的大部分操作在内存上完成，再加上它采用了高效的数据结构，例如哈希表和跳表，这是它实现高性能的一个重要原因。另一方面，就是 Redis 采用了多路复用机制&#…...
PID控制示例
PID控制简单示例 import numpy as np import matplotlib.pyplot as plt import copy# 定义曲线函数 y sin(x) def target_curve(x):return np.sin(x)class PID:def __init__(self, kp, ki, kd):self.kp kpself.ki kiself.kd kdself.ep 0.0self.ei 0.0self.ed 0.0self.d…...
GoLand GC(垃圾回收机制)简介及调优
GC(Garbage Collector)垃圾回收机制及调优 简单理解GC机制 其实gc机制特别容易理解，就是物理内存的自动清理工。我们可以把内存想象成一个房间，程序运行时会在这个房间里存放各种东西，但有时候我们会忘记把不再需要的东西拿出去，…...
AI：40-基于深度学习的森林火灾识别
🚀 本文选自专栏：AI领域专栏 从基础到实践，深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家，通过案例和项目实践，掌握核心概念和实用技能。每篇案例都包含代码实例，详细讲解供大家学习。 📌📌📌本专栏包含以下学习方向： 机器学习、深度学…...
37基于MATLAB平台的图像去噪，锐化，边缘检测，程序已调试通过，可直接运行。
基于MATLAB平台的图像去噪，锐化，边缘检测，程序已调试通过，可直接运行。 37matlab边缘检测图像处理 (xiaohongshu.com)...
通过Metasploit+Ngrok穿透内网长期维持访问外网Android设备
前言: 因为之前作为小白我不会在Kali Linux里面把IP映射出外网，卡在那个地方很久，后来解决了这个问题就写方法出来和大家分享分享。 环境： Kali Linux系统(https://www.kali.org/downloads/) Metasploit Ngrok Linux64位的端口转发工具(htt…...
解决JVM环境下的代码覆盖率难题：SimpleCov与JRuby完美兼容指南
解决JVM环境下的代码覆盖率难题：SimpleCov与JRuby完美兼容指南 【免费下载链接】simplecov Code coverage for Ruby with a powerful configuration library and automatic merging of coverage across test suites 项目地址: https://gitcode.com/gh_mirrors/si/…...
SenseVoice语音识别模型在Windows/Linux双平台部署全攻略（附SpringBoot API封装技巧）
SenseVoice语音识别模型在Windows/Linux双平台部署全攻略（附SpringBoot API封装技巧） 语音识别技术正加速渗透企业级应用场景，从智能客服到会议纪要自动化，SenseVoice作为开箱即用的高精度模型，其跨平台兼容性尤为突出…...
手把手教你：Trae 中不写一行代码，一句话实现增删查改
1. 下载并运行 RuoYi 项目 基于您提供的下载地址和操作步骤，流程如下： 1.1. 下载 RuoYi 项目 官网地址：如链接3所示，RuoYi的官方网址是 https://www.ruoyi.vip/。 下载：在官网，您可以根据需要下载不同版…...
ngx_http_init_static_location_trees
1 定义 ngx_http_init_static_location_trees 函数 定义在 ./nginx-1.24.0/src/http/ngx_http.cstatic ngx_int_t ngx_http_init_static_location_trees(ngx_conf_t *cf,ngx_http_core_loc_conf_t *pclcf) {ngx_queue_t *q, *locations;ngx_http_core_loc_conf_…...
解决打印机标签尺寸匹配问题
在开发应用程序时，经常会遇到与打印机相关的各种问题，尤其是当需要打印特定尺寸的标签时。如果您正在开发一个可以打印产品标签的应用，并且遇到标签尺寸不匹配的问题，那么本文将为您提供详细的解决方案。 问题背景 假设您正在与同事开发一个可以打印产品标签的应用。您需…...
别再只会用Burp改后缀了！5种Web文件上传绕过技巧原理深度拆解（.htaccess/MIME/00截断）
Web文件上传绕过技术：从原理到实战的深度解析 在CTF竞赛和实际渗透测试中，文件上传漏洞一直是高频出现的攻击面。许多开发者仅仅依赖简单的后缀名过滤或前端验证，却忽视了底层解析机制的复杂性。本文将深入剖析五种主流绕过技术的核心原理&am…...
免费获取！最新政府机构位置数据应用指南：从地图标注到业务分析
政府机构位置数据的商业应用与合规实践指南 在数字化转型浪潮中，政府机构位置数据正成为企业开发者和政务信息化人员关注的焦点资源。这类数据不仅包含各级政府部门的精确地理位置信息，还蕴含着丰富的行政区划层级关系，为商业地图服务、政务系…...
cronos：嵌入式C++17零依赖chrono时间抽象库
1. 项目概述cronos是一个轻量级、零依赖的 C17 头文件库，其核心目标是为嵌入式系统提供std::chrono兼容的、与硬件原生滴答计数器（native tick counter）无缝对接的时间抽象层。它并非实现一个独立的定时器驱动，而是作为“适配器”…...
动态链接库emp.dll详解：从原理到实战修复
动态链接库emp.dll深度解析：技术原理与高效修复指南 引言：动态链接库的现代价值 在Windows系统的软件生态中，动态链接库(DLL)如同建筑中的预制构件，通过代码复用机制显著提升了开发效率和系统资源利用率。emp.dll作为其中一员&…...
ECharts 进阶：用pictorialBar打造沉浸式3D数据看板
1. 从立体柱状图到3D数据看板的进化之路 第一次看到pictorialBar这个配置项时，我正对着产品经理要求的"科技感大屏"发愁。传统柱状图在会议室大屏上就像黑白电视一样乏味，直到发现ECharts这个隐藏技能——用几行代码就能把平面图表变成带光影效…...