From f995e620c77a2b633d3f8c5bf0bc998b5b0b837a Mon Sep 17 00:00:00 2001 From: Victor Pavlov Date: Tue, 26 Feb 2019 11:43:51 +0200 Subject: [PATCH 1/8] Translate page "DOM Elements" from the "API Reference" section --- content/docs/reference-dom-elements.md | 70 +++++++++++++------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index 52e780b96..59eed225b 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -1,6 +1,6 @@ --- id: dom-elements -title: DOM Elements +title: Елементи DOM layout: docs category: Reference permalink: docs/dom-elements.html @@ -14,27 +14,27 @@ redirect_from: - "tips/dangerously-set-inner-html.html" --- -React implements a browser-independent DOM system for performance and cross-browser compatibility. We took the opportunity to clean up a few rough edges in browser DOM implementations. +React впроваджує незалежну від браузера систему DOM для продуктивності та сумісності між браузерами. Ми використали цю можливість, щоб згладити кілька гострих кутів в реалізації DOM в браузері. -In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute `tabindex` corresponds to the attribute `tabIndex` in React. The exception is `aria-*` and `data-*` attributes, which should be lowercased. For example, you can keep `aria-label` as `aria-label`. +В React усі властивості й атрибути DOM (включаючи обробники подій) мають використовувати *camelCase* нотацію. Наприклад, атрибут HTML `tabindex` відповідає атрибуту `tabIndex` в React. Виключенням є лише `aria-*` та `data-*` атрибути, які будуть у нижньому регістрі. Наприклад, ви можете залишити `aria-label` як `aria-label`. -## Differences In Attributes {#differences-in-attributes} +## Відмінності в атрибутах {#differences-in-attributes} -There are a number of attributes that work differently between React and HTML: +Є багато атрибутів які працюють по-різному в React та HTML: ### checked {#checked} -The `checked` attribute is supported by `` components of type `checkbox` or `radio`. You can use it to set whether the component is checked. This is useful for building controlled components. `defaultChecked` is the uncontrolled equivalent, which sets whether the component is checked when it is first mounted. +Атрибут `checked` підтримується у компонентах `` типу `checkbox` та `radio`. Ви можете використати його, щоб зробити компонент вибраним. Це корисно для побудови контрольованих компонентів. `defaultChecked` — це неконтрольований еквівалент, який робить компонент вибраним коли той вперше змонтовано. ### className {#classname} -To specify a CSS class, use the `className` attribute. This applies to all regular DOM and SVG elements like `
`, ``, and others. +Щоб визначити CSS класс, слід використовувати атрибут `className`. Він застосовується з усіма звичаними DOM та SVG елементами, як `
`, `` та інші. -If you use React with Web Components (which is uncommon), use the `class` attribute instead. +Якщо ви використовуєте React з Веб-компонентами (що не є типовим), то натомість використовуйте атрибут `class`. ### dangerouslySetInnerHTML {#dangerouslysetinnerhtml} -`dangerouslySetInnerHTML` is React's replacement for using `innerHTML` in the browser DOM. In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. So, you can set HTML directly from React, but you have to type out `dangerouslySetInnerHTML` and pass an object with a `__html` key, to remind yourself that it's dangerous. For example: +`dangerouslySetInnerHTML` — це React-альтернатива виктористання `innerHTML` в DOM браузера. Взагалі, встановлення HTML через код є ризикованим, бо можна не навмисне наразити ваших користувачів на [міжсайтову скриптінг (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() { @@ -48,23 +48,23 @@ function MyComponent() { ### htmlFor {#htmlfor} -Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead. +Оскільки `for` є зарезервованим словом у JavaScript, елементи React натомість використовують `htmlFor`. ### onChange {#onchange} -The `onChange` event behaves as you would expect it to: whenever a form field is changed, this event is fired. We intentionally do not use the existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to handle user input in real time. +Подія `onChange` веде себе так, як ви й очікували: ця подія буде запущена, коли змінюється поле форми. Ми навмисно не використовуємо існуючу поведінку браузера, оскільки `onChange` є неправильним для своєї поведінки, і React покладається на цю подію, щоб опрацьовувати дані введені користувачем в реальному часі. ### selected {#selected} -The `selected` attribute is supported by `
``` -Not all style properties are converted to pixel strings though. Certain ones remain unitless (eg `zoom`, `order`, `flex`). A complete list of unitless properties can be seen [here](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59). +Але не всі властивості стилів конвертуються до рядків з пікселями. Деякі залишаються без одиниць вимірювання (наприклад, `zoom`, `order`, `flex`). Повний список властивостей без одиниць вимірювання може бути переглянутий [тут](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59). ### suppressContentEditableWarning {#suppresscontenteditablewarning} -Normally, there is a warning when an element with children is also marked as `contentEditable`, because it won't work. This attribute suppresses that warning. Don't use this unless you are building a library like [Draft.js](https://facebook.github.io/draft-js/) that manages `contentEditable` manually. +Зазвичай, існує попередження, коли елемент з дочірніми елементами позначений як `contentEditable`, оскільки це не спрацює. Цей атрибут пригнічує це попередження. Не використовуйте його, якщо ви не створюєте бібліотеку, на кшталт [Draft.js](https://facebook.github.io/draft-js/), яка керує `contentEditable` вручну. ### suppressHydrationWarning {#suppresshydrationwarning} -If you use server-side React rendering, normally there is a warning when the server and the client render different content. However, in some rare cases, it is very hard or impossible to guarantee an exact match. For example, timestamps are expected to differ on the server and on the client. +Якщо ви використовуєте сервер-рендеринг React, зазвичай існує попередження, коли сервер і клієнт відтворюють відмінний вміст. Проте, в деяких рідкісних випадках, дуже важко або неможливо гарантувати точний збіг. Наприклад, очікується, що часові мітки будуть відрізнятися на сервері і на клієнті. -If you set `suppressHydrationWarning` to `true`, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don't overuse it. You can read more about hydration in the [`ReactDOM.hydrate()` documentation](/docs/react-dom.html#hydrate). +Якщо ви встановите `suppressHydrationWarning` на `true`, React не попередить вас про невідповідності атрибутів і вмісту цього елемента. Він працює лише на одному рівні і призначений для використання в якості "аварійного виходу". Будьте обережні з його використанням. Докладніше про гідратацію можна дізнатися в [документації до ReactDOM.hydrate()](/docs/react-dom.html#hydrate). ### value {#value} -The `value` attribute is supported by `` and `