Create 02.3-jsx-gotchas.ru-RU.md

docs/docs/02.3-jsx-gotchas.ru-RU.md

@@ -0,0 +1,74 @@
+---
+id: jsx-gotchas-ru-RU
+title: Подводные камни JSX
+permalink: jsx-gotchas-ru-RU.html
+prev: jsx-spread-ru-RU.html
+next: interactivity-and-dynamic-uis-ru-RU.html
+---
+
+JSX выглядит подобно HTML, но есть некоторые важные различия, с которыми вы можете столкнуться.
+
+> Замечание:
+>
+> О различиях, связанных с DOM, к примеру, со встроенными атрибутами `style`, читайте [здесь](/react/docs/dom-differences.html).
+
+## HTML-сущности
+
+В JSX вы можете вставлять HTML-сущности внутрь текстовых литералов:
+
+```javascript
+<div>Первое &middot; Второе</div>
+```
+
+Если же вы захотите отобразить HTML-сущность в динамическом содержимом, вы столкнетесь с проблемой двойного экранирования, так как все отображаемые строки экранируются React с целью предотвращения большого числа XSS-атак по умолчанию.
+
+```javascript
+// Плохо: показывает "Первое &middot; Второе"
+<div>{'Первое &middot; Второе'}</div>
+```
+
+Есть несколько способов обойти эту проблему. Проще всего напрямую писать Unicode-символы в JavaScript. Удостоверьтесь, что файл сохранен в кодировке UTF-8 и что заданы корректные директивы UTF-8 для правильного отображения браузером.
+
+```javascript
+<div>{'Первое · Второе'}</div>
+```
+
+Более безопасная альтернатива - найти [unicode число, соответствующее сущности](http://www.fileformat.info/info/unicode/char/b7/index.htm), и использовать его внутри строки JavaScript.
+
+```javascript
+<div>{'Первое \u00b7 Второе'}</div>
+<div>{'Первое ' + String.fromCharCode(183) + ' Второе'}</div>
+```
+
+Вы можете воспользоваться смешанными массивами строк и JSX-элементов. Каждый JSX-элемент в массиве должен иметь уникальный ключ.
+
+```javascript
+<div>{['Первое ', <span key="middot">&middot;</span>, ' Второе']}</div>
+```
+
+В качестве крайней меры у вас есть возможность [вставить сырой HTML](/react/tips/dangerously-set-inner-html.html).
+
+```javascript
+<div dangerouslySetInnerHTML={{'{{'}}__html: 'Первое &middot; Второе'}} />
+```
+
+
+## Нестандартные HTML-атрибуты
+
+Если в стандартные HTML-элементы вы передадите свойства, не существующие в спецификации HTML, React их не отобразит. Чтобы использовать нестандартный атрибут, укажите его с префиксом `data-`.
+
+```javascript
+<div data-custom-attribute="foo" />
+```
+
+Однако, произвольные атрибуты поддерживаются для пользовательских элементов (с дефисом в имени тега или атрибутом `is="..."`).
+
+```javascript
+<x-my-component custom-attribute="foo" />
+```
+
+Атрибуты [Web-доступности](http://www.w3.org/WAI/intro/aria), начинающиеся на `aria-`, будут отображены корректно.
+
+```javascript
+<div aria-hidden={true} />
+```