Skip to content

Commit c3d382e

Browse files
committed
Final refactor
1 parent 9bc18aa commit c3d382e

File tree

8 files changed

+139
-8
lines changed

8 files changed

+139
-8
lines changed

.idea/aws.xml

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/inspectionProfiles/Project_Default.xml

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/misc.xml

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/modules.xml

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/uk.react.dev-fork.iml

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/vcs.xml

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/workspace.xml

Lines changed: 85 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/content/reference/react/useId.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ function PasswordField() {
8383
8484
[Атрибути доступності 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), дають змогу зазначити, що два теги пов'язані один з одним. Наприклад, ви можете зазначити, що елемент (як-от input) описаний іншим компонентом (як-от параграф).
8585
86-
У звичайному HTML ви би написали наступне:
86+
У звичайному HTML ви б написали наступне:
8787
8888
```html {5,8}
8989
<label>
@@ -94,7 +94,7 @@ function PasswordField() {
9494
/>
9595
</label>
9696
<p id="password-hint">
97-
Довжина паролю має бути не менш ніж 18 символів
97+
Довжина паролю має бути не менш ніж 18 символів
9898
</p>
9999
```
100100
@@ -115,7 +115,7 @@ function PasswordField() {
115115
/>
116116
</label>
117117
<p id={passwordHintId}>
118-
Довжина паролю має бути не менш ніж 18 символів
118+
Довжина паролю має бути не менш ніж 18 символів
119119
</p>
120120
</>
121121
);
@@ -141,7 +141,7 @@ function PasswordField() {
141141
/>
142142
</label>
143143
<p id={passwordHintId}>
144-
Довжина паролю має бути не менш ніж 18 символів
144+
Довжина паролю має бути не менш ніж 18 символів
145145
</p>
146146
</>
147147
);
@@ -179,9 +179,9 @@ input { margin: 5px; }
179179
180180
Можливо, вам кортить дізнатися, чому використання `useId` краще за інкрементування глобальної змінної, як наприклад, `nextId++`.
181181
182-
Початкова перевага `useId` в тому, що React запевниться, що це працює разом із [серверним рендерингом.](/reference/react-dom/server) Протягом серверного рендерингу, ваш компонент генерує HTML-вивід. Далі на клієнті [гідрація](/reference/react-dom/client/hydrateRoot) прикріплює обробники подій до згенерованого HTML. Для коректної роботи гідрації, клієнтський вивід має збігатись із серверним HTML.
182+
Початкова перевага `useId` в тому, що React запевниться, що це працює разом із [серверним рендерингом.](/reference/react-dom/server) Протягом серверного рендерингу, ваш компонент генерує HTML-вивід. Далі на клієнті [гідрація](/reference/react-dom/client/hydrateRoot) прикріплює обробники подій до згенерованого HTML. Для коректної роботи гідрації клієнтський вивід має збігатись із серверним HTML.
183183
184-
Це складно гарантувати для інкрементного лічильника, бо порядок, за яким клієнтські компоненти проходять гідрацію не збігається з порядком за яким був виданий серверний HTML. Викликаючи `useId`, ви запевняєтеся, що гідрація буде працювати, а серверний і клієнтський виводи будуть збігатися.
184+
Це складно гарантувати для інкрементного лічильника, бо порядок, за яким клієнтські компоненти проходять гідрацію, не збігається з порядком, за яким був виданий серверний HTML. Викликаючи `useId`, ви запевняєтеся, що гідрація буде працювати, а серверний і клієнтський виводи будуть збігатися.
185185
186186
У межах React, `useId` генерується з "батьківського шляху" компонента, що його викликав. Ось чому, якщо клієнтське та серверне дерево однакове, "батьківський шлях" буде збігатися, незважаючи на порядок рендерингу.
187187
@@ -255,7 +255,7 @@ function PasswordField() {
255255
/>
256256
</label>
257257
<p id={passwordHintId}>
258-
Довжина паролю має бути не менш ніж 18 символів
258+
Довжина паролю має бути не менш ніж 18 символів
259259
</p>
260260
</>
261261
);
@@ -309,7 +309,7 @@ input { margin: 5px; }
309309
310310
### Використання однакового ID-префікса на клієнті та сервері {/*using-the-same-id-prefix-on-the-client-and-the-server*/}
311311
312-
Якщо ви [рендерите декілька незалежних React-застосунків на одній сторінці](#specifying-a-shared-prefix-for-all-generated-ids), і деякі з цих застосунків відрендерені сервером, перевірте, що `identifierPrefix`, який ви передаєте до [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) на клієнті, є тим самим `identifierPrefix`, який ви передаєте до [серверних APIs](/reference/react-dom/server), наприклад, [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream)
312+
Якщо ви [рендерите декілька незалежних React-застосунків на одній сторінці](#specifying-a-shared-prefix-for-all-generated-ids), і деякі з цих застосунків відрендерені сервером, перевірте, що `identifierPrefix`, який ви передаєте до [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) на клієнті, є тим самим `identifierPrefix`, який ви передаєте до [серверних API](/reference/react-dom/server), наприклад, [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream)
313313
314314
```js
315315
// Server

0 commit comments

Comments
 (0)