React 的 useId 怎么使用

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 的典型用途&

上一篇:基于51单片机的温湿度上下限监测预警proteus仿真-芯片/模块的特点:


下一篇:undeclared identifier ‘UNITY_PREV_MATRIX_M‘ - Unity Shader自己写URP,引用内部 hlsl