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

news2024/11/27 21:23:05

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>
  密码:
  <input
    type="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>
        密码:
        <input
          type="password"
          aria-describedby={passwordHintId}
        />
      </label>
      <p id={passwordHintId}>
        密码应该包含至少 18 个字符
      </p>
    </>
  );
}

现在,即使 PasswordField 多次出现在屏幕上,生成的 ID 并不会冲突。

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  return (
    <>
      <label>
        密码:
        <input
          type="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 应用程序,请在 createRoothydrateRoot 调用中将 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>
        密码:
        <input
          type="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)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1144470.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【CSS】包含块

CSS规范中的包含块 包含块的内容&#xff1a; 元素的尺寸和位置&#xff0c;会受它的包含块所影响。 对于一些属性&#xff0c;例如 width, height, padding, margin&#xff0c;绝对定位元素的偏移值&#xff08;比如 position 被设置为 absolute 或 fixed&#xff09;&…

『第十章』仪态万千的雨燕:UIKit 和 SwiftUI

在本篇博文中,您将学到如下内容: 1. 老骥伏枥:AppKit 和 UIKit2. 雨燕的新装:SwiftUI3. SwiftUI 原生视图4. SwiftUI 容器4.1 ViewThatFits4.2 自定义布局(Custom Layout)6. SwiftUI 修改器(Modifiers)6.1 修改器修饰作用域6.1 自定义修改器5. SwiftUI 状态:真相之源(S…

在spring boot+vue项目中@CrossOrigin 配置了允许跨域但是依然报错跨域,解决跨域请求的一次残酷经历

首先&#xff0c;说一下我们的项目情况&#xff0c;我们项目中后端有一个过滤器&#xff0c;如果必须要登录的接口路径会被拦下来检查&#xff0c;前端要传一个token&#xff0c;然后后端根据这个token来判断redis中这个用户是否已经登录。 if (request.getMethod().equals(&qu…

20、Python -- 变量作用域、局部函数

目录 变量作用域变量&#xff1f;字典&#xff1f;获取变量字典变量遮蔽解决方法&#xff1a;方法1&#xff1a;使用globals访问全局变量方法2&#xff1a;在函数中声明全局变量 局部函数封闭函数返回局部函数代码演示另一种写法 局部函数的遮蔽问题如图&#xff1a;解决方法&a…

深入理解Java中的转义字符

最近在学习《两周自制脚本语言》这本书&#xff0c;在词法分析的一些复杂的正则中用到了大量的转义字符’\&#xff0c;比如正则字符串中包含了这个部分\\\\\"你知道它是匹配什么的么&#xff1f; 反斜杠在字符串和正则表达式中都有特殊作用。今天让我们来深入理解一下Ja…

如何使用drawio画流程图以及导入导出

画一个基本的流程图 你可以在线使用drawio, 或者drawon创建很多不同类型的图表。 如何使用编辑器&#xff0c;让我们以一个最基本的流程图开始。 流程图&#xff0c;就是让你可视化的描述一个过程或者系统。 图形和很少部分的文字表达就可以让读者很快的理解他们需要什么。 创…

文心大模型走进高校!百度携手吉林大学计算机学院成功举办AI师资培训

随着人工智能技术的快速发展&#xff0c;大模型已经成为了人工智能的主流发展方向&#xff0c;同时也对新时代AI人才的培养带来了新的思考与挑战。为了推动大模型及人工智能相关专业人员的培养&#xff0c;10月20日-22日&#xff0c;百度飞桨携手中国电子学会&#xff0c;吉林大…

@TableLogic 这个注解的作用

TableLogic 是 MyBatis-Plus&#xff08;一个 MyBatis 的增强工具&#xff09;提供的一个注解&#xff0c;用于实现逻辑删除功能。 逻辑删除并不是真正从数据库中删除记录&#xff0c;而是通过在数据库表中设置一个标记字段&#xff08;通常是一个状态字段&#xff0c;如 is_d…

【Linux】部署及发布单机项目及前后端分离的项目

目录 一、讲述 1. 为什么 2. 要求 二、单机项目 1. 本机测试 2. 部署 三、前后端 1. 准备 2. 部署 一、讲述 1. 为什么 实施部署和发布项目的目的是将软件开发的成果转化为可用的产品或服务&#xff0c;以满足用户的需求。以下是实施部署和发布项目的一些重要原因&am…

Proteus仿真--闪烁的LED灯

本文介绍一种基于51单片机实现的LED灯闪烁仿真&#xff08;完整仿真源文件及代码见文末链接&#xff09; 本文主要介绍51单片机的LED闪烁仿真设计&#xff0c;仿真文件截图如下&#xff1a; 仿真视频如下&#xff1a; Proteus仿真--闪烁的LED灯 附完整Proteus仿真资料代码资…

NlogPrismWPF

文章目录 Nlog&Prism&WPF日志模块实现原理添加配置注入服务应用测试其他模块怎么调用&#xff1f; Nlog&Prism&WPF 日志模块 介绍了为WPF框架Prism注册Nlog日志服务的方法 实现原理 无论是在WPF或者ASP.NET Core当中, 都可以使用ServiceCollection来做到着…

【软考】10.1 算法特性/时间复杂度/递归/分治/动态规划

《算法》 《时间复杂度》 n 的最高次项 渐进符号 算法复杂度 线性级 O&#xff08;n&#xff09;&#xff1a;顺序查找对数级 O&#xff08;logn&#xff09;&#xff1a;对半查找、快速查找、归并算法 《递归》 时间复杂度 《分治法》 《动态规划法》 适用于求全局最优解构建…

MySQL总结 (思维导图,常用)

一、常见的增删改查 二、约束&#xff08;五种&#xff09; 三、聚合查询 1、聚合函数 2、group by 和 having 3、联合查询 案例表&#xff1a; drop table if exists classes; create table classes (id int primary key auto_increment,name varchar(20) ); insert into …

CAD2024最新中文版安装教程分享

wx供重浩&#xff1a;创享日记 对话框发送&#xff1a;cad24 获取 AutoCAD是目前计算机辅助设计领域最流行的CAD软件&#xff0c;此软件功能强大、使用方便&#xff0c;在国内外广泛应用于机械、建筑、家居、纺织等诸多行业。CAD制图软件具有良好的用户界面&#xff0c;通过交互…

开发直播商城APP:技术要点和最佳实践

在当今数字时代&#xff0c;直播商城APP正变得越来越受欢迎&#xff0c;成为了吸引消费者和促进销售的强大工具。这篇文章将探讨开发直播商城APP的技术要点和最佳实践&#xff0c;为开发者提供有价值的指导。 第一部分&#xff1a;项目准备 1.1定义项目目标 在开始开发直播商…

中国黑客群体的收入,与国外的黑客调查问卷相比!竟然还有女黑客!

从圈外认知来说&#xff0c;黑客一直被认为是高收入群体&#xff0c;黑客有白帽和黑帽处于黑白两道的黑客会的技术都有些相似&#xff0c;但是却是对立的&#xff0c;白帽做网络安全&#xff0c;修补漏洞。黑帽各种破坏&#xff0c;挖数据&#xff0c;攻击漏洞。 如果你对网络…

网络编程 - IP协议

目录 一&#xff0c;IP协议格式 1.1 拆包组包 1.2 8位生存空间 二&#xff0c;地址管理 2.1 动态分配 IP 2.2 NAT 机制&#xff08;网络地址转换&#xff09; 2.3 IPv6 2.4 网段划分 三&#xff0c;路由选择 一&#xff0c;IP协议格式 4位版本&#xff1a;IPv44位首部长…

数据结构和算法(15):排序

快速排序 分治 快速排序与归并排序的分治之间的不同&#xff1a; 归并排序的计算量主要消耗于有序子向量的归并操作&#xff0c;而子向量的划分却几乎不费时间&#xff1b; 快速排序恰好相反&#xff0c;它可以在O(1)时间内&#xff0c;由子问题的解直接得到原问题的解&#…

rust 创建多线程web server

创建一个 http server&#xff0c;处理 http 请求。 创建一个单线程的 web 服务 web server 中主要的两个协议是 http 和 tcp。tcp 是底层协议&#xff0c;http 是构建在 tcp 之上的。 通过std::net库创建一个 tcp 连接的监听对象&#xff0c;监听地址为127.0.0.1:8080. us…

轻松合并多个TXT文本,实现一键文件整理!

亲爱的读者们&#xff0c;您是否曾经需要将多个TXT文本文件合并成一个文件&#xff0c;却苦于无从下手&#xff1f;现在&#xff0c;我们向您介绍一个全新的TXT文本合并工具&#xff0c;让您轻松实现一键文件整理&#xff01; 首先&#xff0c;在首助编辑高手的主页面板块栏里…