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

React 生成传递给无障碍属性的唯一 ID

news 2025/7/8 11:07:59

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&#xff1a; import { useId } from react; function PasswordField() { const passwordHintId useId(); // ...参数 useId 不带任何参数。 返回值 useId 返回一个唯一的字符串 ID&#xff0c;与此特定组件中的 useI…...

编程日记 2023/10/30 19:34:08

十种排序算法(1) - 准备测试函数和工具

1.准备工作 我们先写一堆工具&#xff0c;后续要用&#xff0c;不然这些写在代码里可读性巨差 #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…...

编程日记 2023/10/30 19:33:07

IRF联动 BFD-MAD

文章目录 IRF堆叠一、主设备配置二、备设备配置三、验证 MAD检测一、MAD检测二、MAD验证 本实验以2台设备进行堆叠示例&#xff0c;按照配置顺序&#xff0c;先配置主设备&#xff0c;再配置备设备。在IRF配置前暂时先不接堆叠线&#xff0c;按步骤提示接线。 IRF堆叠 一、主设…...

编程日记 2023/10/30 19:32:06

双向链表的初步练习

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇: Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”…...

编程日记 2023/10/30 19:31:05

IDE的组成

集成开发环境&#xff08;IDE&#xff0c;Integrated Development Environment &#xff09;是用于提供程序开发环境的应用程序&#xff0c;一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务…...

编程日记 2023/10/30 19:30:04

项目解读_v2

1. 项目介绍 如果使用task2-1作为示例时&#xff0c;　运行process.py的过程中需要确认 process调用的是函数 preprocess_ast_wav2vec(wav, fr) 1.1 任务简介 首个开源的儿科呼吸音数据集&#xff0c; 通过邀请11位医师标注&#xff1b; 数字听诊器的采样频率和量化分辨率分…...

编程日记 2023/10/30 19:29:03

杀毒软件哪个好，杀毒软件有哪些

安全杀毒软件是一种专门用于检测、防止和清除计算机病毒、恶意软件和其他安全威胁的软件。这类软件通常具备以下功能&#xff1a; 1. 实时监测&#xff1a;通过实时监测计算机系统&#xff0c;能够发现并防止病毒、恶意软件等安全威胁的入侵。 2. 扫描和清除&#xff1a;可以…...

编程日记 2023/10/30 19:28:02

Ubuntu上安装配置Nginx

要在 Ubuntu 上安装 Nginx&#xff0c;请按照以下步骤进行操作&#xff1a; 打开终端&#xff1a;可以使用快捷键 Ctrl Alt T 打开终端&#xff0c;或者在开始菜单中搜索 “Terminal” 并点击打开。 更新软件包列表&#xff1a;在终端中运行以下命令&#xff0c;以确保软件包…...

编程日记 2023/10/30 19:27:01

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()…...

编程日记 2023/10/30 19:26:00

多线程---单例模式

文章目录 什么是单例模式&#xff1f;饿汉模式懒汉模式版本一&#xff1a;最简单的懒汉模式版本二&#xff1a;考虑懒汉模式存在的线程安全问题版本三&#xff1a;更完善的解决线程安全问题版本四&#xff1a;解决指令重排序问题 什么是单例模式&#xff1f; 单例模式&#xf…...

编程日记 2023/10/30 19:22:54

SpringBoot相比于Spring的优点（自动配置和依赖管理）

自动配置 例子见真章 我们先看一下我们Spring整合Druid的过程&#xff0c;以及我们使用SpringBoot整合Druid的过程我们就知道我们SpringBoot的好处了。 Spring方式 Spring方式分为两种&#xff0c;第一种就是我们使用xml进行整合&#xff0c;第二种就是使用我们注解进行简化…...

编程日记 2023/10/30 19:21:52

SAP SPAD新建打印纸张

SAP SPAD新建打印纸张 1.事务代码SPAD 2.完全管理&#xff0d;设备类型&#xff0d;页格式-显示(创建格式页) 3.按标准A4纸张为模板参考创建。同一个纸张纵向/横向各创建1次(创建格式页) 4.完全管理&#xff0d;设备类型&#xff0d;格式类型-显示(创建格式类型&#xff0…...

编程日记 2023/10/30 19:20:51

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 装箱和拆箱&#xff08;*&#xff09;11.8 结构作为返回值和参数11…...

编程日记 2023/10/30 19:19:50

车载电子电器架构 —— 基于AP定义车载HPC

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 屏蔽力是信息过载时代一个人的特殊竞争力，任何消耗你的人和事，多看一眼都是你的不对。非必要不费力证明自己，无利益不试图说服别人，是精神上的节…...

编程日记 2023/10/30 19:18:48

Redis原理-IO模型和持久化

高性能IO模型 为什么单线程Redis能那么快 一方面&#xff0c;Redis 的大部分操作在内存上完成&#xff0c;再加上它采用了高效的数据结构&#xff0c;例如哈希表和跳表&#xff0c;这是它实现高性能的一个重要原因。另一方面&#xff0c;就是 Redis 采用了多路复用机制&#…...

编程日记 2023/10/30 19:17:48

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…...

编程日记 2023/10/30 19:16:46

GoLand GC(垃圾回收机制)简介及调优

GC(Garbage Collector)垃圾回收机制及调优 简单理解GC机制 其实gc机制特别容易理解&#xff0c;就是物理内存的自动清理工。我们可以把内存想象成一个房间&#xff0c;程序运行时会在这个房间里存放各种东西&#xff0c;但有时候我们会忘记把不再需要的东西拿出去&#xff0c…...

编程日记 2023/10/30 19:15:45

AI：40-基于深度学习的森林火灾识别

🚀 本文选自专栏：AI领域专栏 从基础到实践，深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家，通过案例和项目实践，掌握核心概念和实用技能。每篇案例都包含代码实例，详细讲解供大家学习。 📌📌📌本专栏包含以下学习方向： 机器学习、深度学…...

编程日记 2023/10/30 19:14:44

37基于MATLAB平台的图像去噪，锐化，边缘检测，程序已调试通过，可直接运行。

基于MATLAB平台的图像去噪&#xff0c;锐化&#xff0c;边缘检测&#xff0c;程序已调试通过&#xff0c;可直接运行。 37matlab边缘检测图像处理 (xiaohongshu.com)...

编程日记 2023/10/30 19:13:42

通过Metasploit+Ngrok穿透内网长期维持访问外网Android设备

前言: 因为之前作为小白我不会在Kali Linux里面把IP映射出外网&#xff0c;卡在那个地方很久&#xff0c;后来解决了这个问题就写方法出来和大家分享分享。 环境&#xff1a; Kali Linux系统(https://www.kali.org/downloads/) Metasploit Ngrok Linux64位的端口转发工具(htt…...

编程日记 2023/10/30 19:12:41

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/6/16 11:04:37

工程地质软件市场：发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/6/17 23:10:20

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/6/16 20:22:52

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/6/17 16:58:36

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/7/7 1:07:56

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/6/21 6:15:03

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/7/6 6:16:10

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/6/17 4:17:05

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/6/25 4:41:54

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

编程新知 2025/6/21 15:09:10