Skip to content

Update [ru] web-components.md #425

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.

Sign up for GitHub

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

Closed
wants to merge 1 commit into from
Closed

Update [ru] web-components.md #425

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions content/docs/web-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}

Expand All @@ -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() {
Expand Down Expand Up @@ -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) перед загрузкой веб-компонентов.