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
+18-18Lines changed: 18 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -38,13 +38,13 @@ function PasswordField() {
38
38
39
39
#### Значэнні, якія вяртаюцца {/*returns*/}
40
40
41
-
`useId` вяртае радок з унікальным ідэнтыфікатарам, які праасацыяваны з гэтым канкрэтным выклікам `useId` у гэтым канкрэтным кампаненце.
41
+
`useId` вяртае радок з унікальным ідэнтыфікатарам, які звязаны з з гэтым канкрэтным выклікам `useId` у гэтым канкрэтным кампаненце.
42
42
43
43
#### Агаворкі {/*caveats*/}
44
44
45
-
- `useId` — хук, а значыць, вы можаце яго выклікаць толькі **на верхнім узроўні вашага кампанента** ці ўнутры ўласнага хука. Ëн не можа быць выкліканы ўнутры цыкла альбо ўмовы. Калі вы гэтага патрабуеце, выміце ў новы кампанент і перанясіце стан туды.
46
-
- `useId` **не мусіць быць выкарыстаны для генерацыі ключоў кэша** для [use()](/reference/react/use). Ідэнтыфікатар стабільны пакуль кампанент прымантаваны, але можа змяняцца паміж рэндарамі. Ключы кэша мусяць быць згенераванымі на падставе вашых даных.
47
-
- `useId` **не мусіць быць выкарыстаны для генерацыі ключоў** у спісах. [Ключы мусяць быць згенераванымі на падставе вашых даных](/learn/rendering-lists#where-to-get-your-key).
45
+
- `useId` — хук, а значыць, вы можаце выклікаць яго толькі **на верхнім узроўні вашага кампанента** ці ўнутры ўласнага хука. Ëн не можа быць выкліканы ўнутры цыкла альбо ўмовы. Калі вам усё ж гэта патрэбна, то стварыце новы кампанент і перанясіце стан туды.
46
+
- `useId` **не мусіць выкарыстоўвацца для генерацыі ключоў кэша** для [use()](/reference/react/use). Ідэнтыфікатар стабільны пры манціраванні, але можа змяняцца паміж рэндарамі. Ключы кэша мусяць генерыравацца на падставе вашых даных.
47
+
- `useId` **не мусіць выкарыстоўвацца для генерацыі ключоў** у спісах. [Ключы мусяць генерыравацца на падставе вашых даных](/learn/rendering-lists#where-to-get-your-key).
48
48
- `useId` на дадзены момант не можа быць выкарыстаны ўнутры [асінхронных серверных кампанентаў](/reference/rsc/server-components#async-components-with-server-components).
49
49
50
50
---
@@ -53,7 +53,7 @@ function PasswordField() {
53
53
54
54
<Pitfall>
55
55
56
-
**Не выкарыстоўвайце `useId` для генерацыі ключоў у спісах.** [Ключы мусяць быць згенераванымі на падставе вашых даных](/learn/rendering-lists#where-to-get-your-key).
56
+
**Не выкарыстоўвайце `useId` для генерацыі ключоў у спісах.** [Ключы мусяць генерыравацца на падставе вашых даных](/learn/rendering-lists#where-to-get-your-key).
57
57
58
58
</Pitfall>
59
59
### Генерацыя ўнікальных ідэнтыфікатараў для атрыбутаў даступнасці {/*generating-unique-ids-for-accessibility-attributes*/}
@@ -79,7 +79,7 @@ function PasswordField() {
79
79
80
80
**Давайце разгледзім прыклад, калі гэта можа быць карысна.**
81
81
82
-
[Атрыбуты даступнасці ў HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) як, напрыклад, [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) дазваляюць пазначыць, што два тэгі звязаныя адно з адным. Такім чынам, як варыянт, вы можаце адзначыць, што элемент (напрыклад, поле ўводу) апісаны іншым элементам (напрыклад, параграфам).
82
+
[Атрыбуты даступнасці ў HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) як, напрыклад, [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) дазваляюць пазначыць, што два тэгі звязаныя адзін з адным. Такім чынам, як варыянт, вы можаце адзначыць, што элемент (напрыклад, поле ўводу) апісаны іншым элементам (напрыклад, параграфам).
83
83
84
84
У звычайным HTML, вы б апісалі гэта так:
85
85
@@ -92,11 +92,11 @@ function PasswordField() {
92
92
/>
93
93
</label>
94
94
<p id="password-hint">
95
-
Пароль мусіць змяшчаць як найменш18 сімвалаў
95
+
Пароль мусіць змяшчаць як мінімум18 сімвалаў
96
96
</p>
97
97
```
98
98
99
-
Але ўказваць ідэнтыфікатар наўпрост у кодзе не з’яўляецца добрай практыкай у React. Кампанент можа быць адрэндараны болей за адзін раз на старонцы, а ідэнтыфікатары маюць быць унікальнымі! Замест указання пастаяннага ідэнтыфікатара, згенеруйце ўнікальны з дапамогай `useId`:
99
+
Але ўказанне ідэнтыфікатара наўпрост у кодзе не з’яўляецца добрай практыкай у React. На старонцы кампанент можа быць адрэндараны болей за адзін раз, а ідэнтыфікатары павінны быць унікальнымі! Замест указання пастаяннага ідэнтыфікатара, згенеруйце ўнікальны з дапамогай `useId`:
100
100
101
101
```js {4,11,14}
102
102
import { useId } from'react';
@@ -113,14 +113,14 @@ function PasswordField() {
113
113
/>
114
114
</label>
115
115
<p id={passwordHintId}>
116
-
Пароль мусіць змяшчаць як найменш18 сімвалаў
116
+
Пароль мусіць змяшчаць як мінімум18 сімвалаў
117
117
</p>
118
118
</>
119
119
);
120
120
}
121
121
```
122
122
123
-
Цяпер, нават калі `PasswordField` з’явіцца на старонцы некалькі раз, згенераваныя ідэнтыфікатары не будуць канфліктаваць.
123
+
Цяпер, нават калі `PasswordField` з’явіцца на старонцы некалькі разоў, згенераваныя ідэнтыфікатары не будуць канфліктаваць.
124
124
125
125
<Sandpack>
126
126
@@ -139,7 +139,7 @@ function PasswordField() {
139
139
/>
140
140
</label>
141
141
<p id={passwordHintId}>
142
-
Пароль мусіць змяшчаць як найменш18 сімвалаў
142
+
Пароль мусіць змяшчаць як мінімум18 сімвалаў
143
143
</p>
144
144
</>
145
145
);
@@ -163,25 +163,25 @@ input { margin: 5px; }
163
163
164
164
</Sandpack>
165
165
166
-
[Азнаёмцеся з відэа](https://www.youtube.com/watch?v=0dNzNcuEuOo), каб пабачыць розніцу ў карыстанні з ужываннем дапаможных тэхналогій.
166
+
[Азнаёмцеся з відэа](https://www.youtube.com/watch?v=0dNzNcuEuOo), каб убачыць розніцу ў карыстальніцкім досведзе пры выкарыстанні дапаможных тэхналогій.
167
167
168
168
<Pitfall>
169
169
170
-
Пры [серверным рэндарынгу](/reference/react-dom/server), **`useId` патрабуе ідэнтычнага дрэва кампанентаў на серверы і на кліенце**. Калі дрэвы, што вы рэндарыце і кліенце і серверы не суадносяцца, згенераваныя ідэнтыфікатары будуць адрознымі.
170
+
Пры [серверным рэндарынгу](/reference/react-dom/server), **`useId` патрабуе ідэнтычнага дрэва кампанентаў на серверы і на кліенце**. Калі дрэвы, што вы рэндарыце на кліенце і серверы не суадносяцца, згенераваныя ідэнтыфікатары будуць адрознымі.
171
171
172
172
</Pitfall>
173
173
174
174
<DeepDive>
175
175
176
-
#### Чым useId лепей за нарастальнага лічыльнік? {/*why-is-useid-better-than-an-incrementing-counter*/}
176
+
#### Чаму useId лепей за інкрэментальны лічыльнік? {/*why-is-useid-better-than-an-incrementing-counter*/}
177
177
178
-
Вы можаце задумацца: чым`useId` лепей за нарастальную глабальную пераменную накшталт `nextId++`.
178
+
Вы можаце задумацца: чаму`useId` лепей за інкрэментальную глабальную пераменную накшталт `nextId++`.
179
179
180
180
Асноўная перавага `useId` у тым, што React забяспечваю працу пры [серверным рэндарынгу](/reference/react-dom/server). Падчас сервернага рэндарынгу, з вашых кампанентаў генеруецца HTML. Потым, на кліенце, падчас [гідратацыі](/reference/react-dom/client/hydrateRoot) адбываецца прывязка апрацоўшчыкаў падзей да згенераванага HTML. Каб гідратацыя спрацавала, вынік кліента мусіць супадаць з HTML сервера.
181
181
182
-
Гэта вельмі складана гарантаваць праз нарастальны лічыльнік, бо парадак, у якім кліент робіць гідратацыю кампанентаў, можа не адпавядаць парадку, у якім сервер складае HTML. Карыстаючыся `useId`, можна гарантаваць, што гідрадацыя спрацуе, і вынік будзе аднолькавым на серверы і кліенце.
182
+
Гэта вельмі складана гарантаваць праз інкрэментальны лічыльнік, бо парадак, у якім кліент робіць гідратацыю кампанентаў, можа не адпавядаць парадку, у якім сервер складае HTML. Карыстаючыся `useId`, можна гарантаваць, што гідрадацыя спрацуе, і вынік будзе аднолькавым на серверы і кліенце.
183
183
184
-
Унутры React, `useId` генеруецца на падставе размяшчэння бацькоўскага кампанента». Менавіта таму, калі дрэвы кліента і сервера ідэнтычныя, «размяшчэнне бацькоўскага кампанента» будзе адпавядаць незалежна ад парадку рэндара.
184
+
Унутры React, `useId` генеруецца на падставе размяшчэння бацькоўскага кампанента». Менавіта таму, калі дрэвы кліента і сервера ідэнтычныя, «размяшчэнне бацькоўскага кампанента» будзе супадаць незалежна ад парадку рэндара.
0 commit comments