diff --git a/content/docs/web-components.md b/content/docs/web-components.md index ad0b13a22..597d3917a 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -6,9 +6,9 @@ redirect_from: - "docs/webcomponents.html" --- -React и [веб-компоненты](https://developer.mozilla.org/ru/docs/Web/Web_Components) созданы для решения самых разных задач. Веб-компоненты обеспечивают надёжную инкапсуляцию для повторно используемых компонентов, в то время как React предоставляет декларативную библиотеку для синхронизации данных c DOM. Две цели дополняют друг друга. Как разработчик, вы можете использовать React в своих веб-компонентах, или использовать веб-компоненты в React, или и то, и другое. +React и [веб-компоненты](https://developer.mozilla.org/ru/docs/Web/Web_Components) решают разные задачи. Веб-компоненты обеспечивают надёжную инкапсуляцию для повторно используемых компонентов, в то время как React предоставляет декларативную библиотеку для синхронизации данных c DOM. Они дополняют друг друга. Вы можете использовать как веб-компоненты в React, так и React для создания своих веб-компонентов. Или и то, и то одновременно. -Большинство разработчиков React обходятся без веб-компонентов, но у вас может появиться желание попробовать их. Например, если ваш проект использует сторонние компоненты пользовательского интерфейса, написанные с помощью веб-компонентов. +Большинство проектов обходится без веб-компонентов, однако такая потребность вполне может появиться. Например, когда нужно воспользоваться сторонней библиотекой элементов пользовательского интерфейса, реализованных с помощью веб-компонентов. ## Использование веб-компонентов в React {#using-web-components-in-react} @@ -22,12 +22,11 @@ class HelloMessage extends React.Component { > Примечание: > -> Веб-компоненты часто предоставляют императивный API. Например, веб-компонент `video` может предоставлять функции `play()` и `pause()`. Чтобы получить доступ к необходимому API веб-компонентов, необходимо использовать реф для взаимодействия с DOM-узлом напрямую. Если вы используете сторонние веб-компоненты, лучшим решением будет создать React-компонент и использовать его как обёртку для веб-компонента. +> Веб-компоненты часто предоставляют императивный API. Например, веб-компонент `video` может предоставлять функции `play()` и `pause()`. Чтобы получить доступ к необходимому API веб-компонентов, необходимо использовать реф для взаимодействия с DOM-узлом напрямую. При использовании сторонних веб-компонентов оптимальным решением будет создание вспомогательного React-компонента-обертки для взаимодействия с веб-компонентом. > -> События, созданные веб-компонентами, могут неправильно распространяться через дерево React-компонентов. -> Вам нужно вручную добавить обработчики для таких событий в собственные React-компоненты. +> События, генерируемые веб-компонентами, не всегда распространяются через дерево React-компонентов правильно. Следует вручную добавить обработчик таких событий и далее работать с ними средствами React. -Веб-компоненты используют «class» вместо «className», что часто вводит людей в замешательство. +Веб-компоненты используют «class» вместо «className», что часто вводит в замешательство. ```javascript function BrickFlipbox() { @@ -58,5 +57,5 @@ customElements.define('x-search', XSearch); >Примечание: > ->Данный код **не будет** работать, если вы преобразуете классы с помощью Babel. Взгляните на [ишью](https://github.com/w3c/webcomponents/issues/587) с обсуждением. ->Добавьте шим [custom-elements-es5-adapter](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#custom-elements-es5-adapterjs) перед загрузкой веб-компонентов, чтобы решить эту проблему. +>Данный код **не будет** работать после преобразования классов с помощью Babel. Подробнее смотрите [обсуждение здесь](https://github.com/w3c/webcomponents/issues/587). +>Чтобы решить эту проблему, добавьте пакет совместимости [custom-elements-es5-adapter](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#custom-elements-es5-adapterjs) перед загрузкой веб-компонентов.