useId
是 React 18 引入的一个新 Hook,它用于在客户端生成稳定的、唯一的 ID。这个 Hook 特别有用于提高无障碍性(a11y),比如在构建自定义的下拉菜单、模态框或工具提示等组件时,需要为每个动态创建的元素分配唯一的 ID,以便无障碍技术(如屏幕阅读器)能够正确识别和操作这些元素。
基本用法
useId
返回一个字符串,这个字符串在组件的多次渲染和跨组件边界时保持一致,只要组件树的结构保持不变。
import React, { useId } from 'react';
function MyComponent() {
const labelId = useId('label');
const inputId = useId('input');
return (
<div>
<label htmlFor={labelId}>Username:</label>
<input id={inputId} aria-labelledby={labelId} />
</div>
);
}
然而,上面的用法可能并不是 useId
的典型用途&