Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate page "DOM Elements" from the "API Reference" section #35

Merged
merged 8 commits into from
Mar 2, 2019
20 changes: 10 additions & 10 deletions content/docs/reference-dom-elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,17 @@ React впроваджує незалежну від браузера систе

### checked {#checked}

Атрибут `checked` підтримується у компонентах `<input>` типу `checkbox` та `radio`. Ви можете використати його, щоб зробити компонент вибраним. Це корисно для побудови контрольованих компонентів. `defaultChecked` — це неконтрольований еквівалент, який робить компонент вибраним коли той вперше змонтовано.
Атрибут `checked` підтримується у компонентах `<input>` типу `checkbox` та `radio`. Ви можете використати його, щоб зробити компонент вибраним. Це корисно для побудови контрольованих компонентів. `defaultChecked` — це неконтрольований еквівалент, який робить компонент вибраним коли той вперше було змонтовано.

### className {#classname}

Щоб визначити CSS класс, слід використовувати атрибут `className`. Він застосовується з усіма звичайними DOM- та SVG-елементами, як `<div>`, `<a>` та інші.
Щоб визначити CSS-клас, слід використовувати атрибут `className`. Він застосовується з усіма звичайними DOM- та SVG-елементами, як `<div>`, `<a>` та інші.

Якщо ви використовуєте React з Веб-компонентами (що не є типовим), то натомість використовуйте атрибут `class`.
Якщо ви використовуєте React з веб-компонентами (що не є типовим), то натомість використовуйте атрибут `class`.

### dangerouslySetInnerHTML {#dangerouslysetinnerhtml}

`dangerouslySetInnerHTML` — це React-альтернатива використання `innerHTML` в DOM браузера. Взагалі, вставка HTML-коду через JavaScript є ризикованою, бо можна ненавмисне наразити ваших користувачів на [міжсайтовий скриптинг (XSS)](https://uk.wikipedia.org/wiki/%D0%9C%D1%96%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B8%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3) атаку. Тож, ви можете використовувати вставку HTML-коду безпосередньо через React, але ви повинні використовувати `dangerouslySetInnerHTML` та передавати об'єкт з ключем `__html`, щоб нагадати самому собі, що це є небезпечним. Наприклад:
`dangerouslySetInnerHTML` — це React-альтернатива використання `innerHTML` в DOM браузера. Взагалі, вставка HTML-коду через JavaScript є ризикованою, бо можна ненавмисне наразити ваших користувачів на атаку [міжсайтового скриптингу (XSS)](https://uk.wikipedia.org/wiki/%D0%9C%D1%96%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B8%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3). Тож, ви можете використовувати вставку HTML-коду безпосередньо через React, але ви повинні використовувати `dangerouslySetInnerHTML` та передавати об'єкт з ключем `__html`, щоб нагадати самому собі, що це є небезпечним. Наприклад:

```js
function createMarkup() {
Expand Down Expand Up @@ -95,14 +95,14 @@ function ComponentWithTransition() {
React автоматично додасть суфікс "px" до певних числових властивостей стилю. Якщо ви хочете використовувати одиниці, відмінні від "px", вкажіть значення у вигляді рядка з бажаними одиницями вимірювання. Наприклад:

```js
// Result style: '10px'
// Стиль в рузультаті: '10px'
victorpavlov marked this conversation as resolved.
Show resolved Hide resolved
<div style={{ height: 10 }}>
Hello World!
</div>

// Result style: '10%'
// Стиль в рузультаті: '10%'
victorpavlov marked this conversation as resolved.
Show resolved Hide resolved
<div style={{ height: '10%' }}>
Hello World!
Привіт Світ!
</div>
victorpavlov marked this conversation as resolved.
Show resolved Hide resolved
```

Expand All @@ -114,19 +114,19 @@ React автоматично додасть суфікс "px" до певних

### suppressHydrationWarning {#suppresshydrationwarning}

Якщо ви використовуєте сервер-рендеринг React, зазвичай існує попередження, коли сервер і клієнт відтворюють відмінний вміст. Проте в деяких рідкісних випадках дуже важко або неможливо гарантувати точний збіг. Наприклад, очікується, що часові мітки будуть відрізнятися на сервері і на клієнті.
Якщо ви використовуєте серверний рендеринг React, зазвичай існує попередження, коли сервер і клієнт відтворюють відмінний вміст. Проте в деяких рідкісних випадках дуже важко або неможливо гарантувати точний збіг. Наприклад, очікується, що часові мітки будуть відрізнятися на сервері і на клієнті.

Якщо ви встановите `suppressHydrationWarning` на `true`, React не попередить вас про невідповідності атрибутів і вмісту цього елемента. Він працює лише на одному рівні і призначений для використання в якості "аварійного виходу". Будьте обережні з його використанням. Докладніше про гідратацію можна дізнатися в [документації до ReactDOM.hydrate()](/docs/react-dom.html#hydrate).

### value {#value}

Атрибут `value` підтримується компонентами `<input>` та `<textarea>`. Ви можете використовувати його щоб встановити значення компоненту. Це корисно для побудови контрольованих компонентів. `defaultValue` — це неконтрольований еквівалент, який встановлює значення компоненту, коли той вперше змонтовано.
Атрибут `value` підтримується компонентами `<input>` та `<textarea>`. Ви можете використовувати його щоб встановити значення компоненту. Це корисно для побудови контрольованих компонентів. `defaultValue` — це неконтрольований еквівалент, який встановлює значення компоненту, коли той вперше було змонтовано.

## Усі підтримувані атрибути HTML {#all-supported-html-attributes}

Починаючи з React 16, будь-які стандартні атрибути DOM [або атрибути користувача](/blog/2017/09/08/dom-attributes-in-react-16.html) повністю підтримуються.

React завжди надавав JavaScript-орієнтоване API для DOM. Оскільки компоненти React часто містять як атрибути користувача, так і пов'язані з DOM пропси, React використовує `camelCase` конвенцію так само, як і DOM API:
React завжди надавав JavaScript-орієнтований API для DOM. Оскільки компоненти React часто містять як атрибути користувача, так і пов'язані з DOM пропси, React використовує `camelCase` конвенцію так само, як і DOM API:

```js
<div tabIndex="-1" /> // Так само, як і node.tabIndex DOM API
Expand Down