useId

生成记忆的随机 ID

Import: import { useId } from '@kubed/hooks;'

Source: View source code

Docs: Edit this page

npm: @kubed/hooks

用法

useId 生成在渲染过程中持续存在的随机 ID。 Hook 通常用于将输入元素绑定到标签。生成的随机 id 保存到 ref 中，除非卸载组件，否则不会更改。

import { useId } from '@kubed/hooks';
import { Input } from '@kubed/components'

function MyInput({ id }) {
  const uuid = useId(id);

  return (
    <>
      <label htmlFor={uuid}>Input label</label>
      <Input type="text" id={uuid} />
    </>
  );
}

export default function App() {
  return (
    <div className="flex gap-3 items-center">
      // input and label will have id 'my-id'
      <MyInput id="my-id" />
      // input and label will have random id 'kubed-fZMoF'
      <MyInput />
    </div>
  );
}

1
import { useId } from '@kubed/hooks';
2
import { Input } from '@kubed/components'
3

4
function MyInput({ id }) {
5
  const uuid = useId(id);
6

7
  return (
8
    <>
9
      <label htmlFor={uuid}>Input label</label>
10
      <Input type="text" id={uuid} />
11
    </>
12
  );
13
}
14

15
export default function App() {
16
  return (
17
    <div className="flex gap-3 items-center">
18
      // input and label will have id 'my-id'
19
      <MyInput id="my-id" />
20
      // input and label will have random id 'kubed-fZMoF'
21
      <MyInput />
22
    </div>
23
  );
24
}
25

26

API

useId 钩子接受两个参数：

id – 默认返回的字符串值
generateId – 用于生成随机 ID 的函数

Hook 返回字符串值，该值可以是“id”（如果传递了第一个参数），也可以是使用“generateId”函数生成的随机 id。

1
function useId(id: string, generateId?: () => string): string;

Params

参数	默认值	类型	描述
id	-	`string`	默认返回的字符串值
generateId	-	`() => string`	用于生成随机 ID 的函数`

Result

参数	默认值	类型	描述
id	-	`string`	生成记忆的随机 id