Reat 中的 useId 钩子函数

useId 钩子函数

1、useId 钩子函数简要说明

useId 是 React 钩子函数中最简单的一个，它主要是为横跨服务端和客户端生成一个唯一的 ID 值。

2、useId 代码实例

const randomId1 = useId();
const randomId2 = useId();

return (
  <div>
    <div id={randomId1}>{randomId1}</div>
    <div id={randomId2}>{randomId2}</div>
  </div>
);

运行效果如下：

除了可以为同一个组件赋值 ID 外，还可以使用后缀进行多个组件的 ID 赋值。

const id = useId();

return (
  <>
    <div>
      <label htmlFor={id + "-firstName"}>First Name</label>
      <div>
        <input id={id + "-firstName"} type="text" />
      </div>
      <label htmlFor={id + "-lastName"}>Last Name</label>
      <div>
        <input id={id + "-lastName"} type="text" />
      </div>
    </div>
  </>
);

运行效果图如下：

3、useId 钩子函数陷阱

useId 生产的 ID 值是带有 : 的字符， 所以为元素的 ID 值或者 class 赋予 useId 生产的 ID 值的话，CSS 选择器和 querySelectorAll API 都不能匹配到对应的元素。