You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react/useId.md
+47-47Lines changed: 47 additions & 47 deletions
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ title: useId
4
4
5
5
<Intro>
6
6
7
-
`useId`is a React Hook for generating unique IDs that can be passed to accessibility attributes.
7
+
`useId`是一个 React Hook，可以生成传递给无障碍属性的唯一 ID。
8
8
9
9
```js
10
10
constid=useId()
@@ -16,11 +16,11 @@ const id = useId()
16
16
17
17
---
18
18
19
-
## Reference {/*reference*/}
19
+
## 参考 {/*reference*/}
20
20
21
21
### `useId()` {/*useid*/}
22
22
23
-
Call`useId`at the top level of your component to generate a unique ID:
23
+
在组件的顶层调用`useId`生成唯一 ID：
24
24
25
25
```js
26
26
import { useId } from'react';
@@ -30,35 +30,35 @@ function PasswordField() {
30
30
// ...
31
31
```
32
32
33
-
[See more examples below.](#usage)
33
+
[请看下方更多示例](#usage)。
34
34
35
-
#### Parameters {/*parameters*/}
35
+
#### 参数 {/*parameters*/}
36
36
37
-
`useId`does not take any parameters.
37
+
`useId`不带任何参数。
38
38
39
-
#### Returns {/*returns*/}
39
+
#### 返回值 {/*returns*/}
40
40
41
-
`useId`returns a unique ID string associated with this particular `useId`call in this particular component.
41
+
`useId`返回一个唯一的字符串 ID，与此特定组件中的 `useId`调用相关联。
42
42
43
-
#### Caveats {/*caveats*/}
43
+
#### 注意事项 {/*caveats*/}
44
44
45
-
* `useId`is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
45
+
* `useId`是一个 Hook，因此你只能 **在组件的顶层** 或自己的 Hook 中调用它。你不能在内部循环或条件判断中调用它。如果需要，可以提取一个新组件并将 state 移到该组件中。
46
46
47
-
* `useId` **should not be used to generate keys** in a list. [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key)
@@ -77,26 +77,26 @@ You can then pass the <CodeStep step={1}>generated ID</CodeStep> to different at
77
77
</>
78
78
```
79
79
80
-
**Let's walk through an example to see when this is useful.**
80
+
**让我们通过一个例子，看看这个什么时候有用**。
81
81
82
-
[HTML accessibility attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) like [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) let you specify that two tags are related to each other. For example, you can specify that an element (like an input) is described by another element (like a paragraph).
However, hardcoding IDs like this is not a good practice in React. A component may be rendered more than once on the page--but IDs have to be unique! Instead of hardcoding an ID, generate a unique ID with `useId`:
99
+
然而，在 React 中直接编写 ID 并不是一个好的习惯。一个组件可能会在页面上渲染多次，但是 ID 必须是唯一的！不要使用自己编写的 ID，而是使用 `useId` 生成唯一的 ID。
100
100
101
101
```js {4,11,14}
102
102
import { useId } from'react';
@@ -106,21 +106,21 @@ function PasswordField() {
106
106
return (
107
107
<>
108
108
<label>
109
-
Password:
109
+
密码:
110
110
<input
111
111
type="password"
112
112
aria-describedby={passwordHintId}
113
113
/>
114
114
</label>
115
115
<p id={passwordHintId}>
116
-
The password should contain at least 18characters
116
+
密码应该包含至少 18个字符
117
117
</p>
118
118
</>
119
119
);
120
120
}
121
121
```
122
122
123
-
Now, even if `PasswordField`appears multiple times on the screen, the generated IDs won't clash.
123
+
现在，即使 `PasswordField`多次出现在屏幕上，生成的 ID 并不会冲突。
124
124
125
125
<Sandpack>
126
126
@@ -132,14 +132,14 @@ function PasswordField() {
132
132
return (
133
133
<>
134
134
<label>
135
-
Password:
135
+
密码:
136
136
<input
137
137
type="password"
138
138
aria-describedby={passwordHintId}
139
139
/>
140
140
</label>
141
141
<p id={passwordHintId}>
142
-
The password should contain at least 18characters
142
+
密码应该包含至少 18个字符
143
143
</p>
144
144
</>
145
145
);
@@ -148,9 +148,9 @@ function PasswordField() {
148
148
exportdefaultfunctionApp() {
149
149
return (
150
150
<>
151
-
<h2>Choose password</h2>
151
+
<h2>输入密码</h2>
152
152
<PasswordField />
153
-
<h2>Confirm password</h2>
153
+
<h2>验证密码</h2>
154
154
<PasswordField />
155
155
</>
156
156
);
@@ -163,33 +163,33 @@ input { margin: 5px; }
163
163
164
164
</Sandpack>
165
165
166
-
[Watch this video](https://www.youtube.com/watch?v=0dNzNcuEuOo) to see the difference in the user experience with assistive technologies.
With [server rendering](/reference/react-dom/server), **`useId`requires an identical component tree on the server and the client**. If the trees you render on the server and the client don't match exactly, the generated IDs won't match.
170
+
[使用服务端渲染时](/reference/react-dom/server)，**`useId`需要在服务器和客户端上有相同的组件树**。如果你在服务器和客户端上渲染的树不完全匹配，生成的 ID 将不匹配。
171
171
172
172
</Pitfall>
173
173
174
174
<DeepDive>
175
175
176
-
#### Why is useId better than an incrementing counter? {/*why-is-useid-better-than-an-incrementing-counter*/}
You might be wondering why `useId`is better than incrementing a global variable like `nextId++`.
178
+
你可能想知道为什么使用 `useId`比增加全局变量（如 `nextId++`）更好。
179
179
180
-
The primary benefit of `useId`is that React ensures that it works with [server rendering.](/reference/react-dom/server) During server rendering, your components generate HTML output. Later, on the client, [hydration](/reference/react-dom/client/hydrateRoot) attaches your event handlers to the generated HTML. For hydration to work, the client output must match the server HTML.
This is very difficult to guarantee with an incrementing counter because the order in which the client components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client.
182
+
使用递增计数器非常难以保证这一点，因为客户端组件被 hydrate 处理后的顺序可能与服务器 HTML 发出的顺序不匹配。通过调用 `useId`，你可以确保 hydration 正常工作，并且服务器和客户端之间的输出将匹配。
183
183
184
-
Inside React, `useId` is generated from the "parent path" of the calling component. This is why, if the client and the server tree are the same, the "parent path" will match up regardless of rendering order.
This lets you avoid calling `useId` for every single element that needs a unique ID.
219
+
可以使你避免为每个需要唯一 ID 的元素调用 `useId`。
220
220
221
221
---
222
222
223
-
### Specifying a shared prefix for all generated IDs {/*specifying-a-shared-prefix-for-all-generated-ids*/}
223
+
### 为所有生成的 ID 指定共享前缀 {/*specifying-a-shared-prefix-for-all-generated-ids*/}
224
224
225
-
If you render multiple independent React applications on a single page, pass `identifierPrefix` as an option to your [`createRoot`](/reference/react-dom/client/createRoot#parameters) or [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) calls. This ensures that the IDs generated by the two different apps never clash because every identifier generated with `useId`will start with the distinct prefix you've specified.
225
+
如果你在单个页面上渲染多个独立的 React 应用程序，请在 [`createRoot`](/reference/react-dom/client/createRoot#parameters) 或 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 调用中将 `identifierPrefix` 作为选项传递。这确保了由两个不同应用程序生成的 ID 永远不会冲突，因为使用 `useId`生成的每个 ID 都将以你指定的不同前缀开头。
226
226
227
227
<Sandpack>
228
228
@@ -242,18 +242,18 @@ import { useId } from 'react';
0 commit comments