{"componentChunkName":"component---src-templates-docs-js","path":"/docs/web-components.html","result":{"data":{"markdownRemark":{"html":"

React та веб-компоненти створені для вирішення різних проблем. Веб-компоненти забезпечують надійну інкапсуляцію для повторно використовуваних компонентів, в той час як React надає декларативну бібліотеку для синхронізації даних з DOM. Дві цілі доповнюють одна одну. Як розробник, ви можете використовувати React у своїх веб-компонентах, або використовувати веб-компоненти у React, або і те, і інше.

\n

Більшість React-розробників не використовують веб-компоненти, але у вас може з’явитися бажання спробувати їх. Наприклад, якщо ваш проект використовує сторонні UI-компоненти, написані за допомогою веб-компонентів.

\n

Використання веб-компонентів у React

\n
class HelloMessage extends React.Component {\n  render() {\n    return <div>Привіт <x-search>{this.props.name}</x-search>!</div>;\n  }\n}
\n
\n

Примітка:

\n

Веб-компоненти часто надають імперативний API. Наприклад, video веб-компонент може надавати функції play() і pause(). Щоб отримати доступ до необхідних API-інтерфейсів веб-компонентів, необхідно використовувати реф для взаємодії з DOM-вузлом безпосередньо. Якщо ви використовуєте сторонні веб-компоненти, то ви зможете створити React-компонент і використовувати його як веб-компонент.

\n

Події, створені веб-компонентами, можуть неправильно поширюватися через дерево React-компонентів.\nВам потрібно вручну додати обробники для таких подій у власні React-компоненти.

\n
\n

Одна з поширених помилок — це те, що у веб-компонентах використовується “class” замість “className”.

\n
function BrickFlipbox() {\n  return (\n    <brick-flipbox class=\"demo\">\n      <div>front</div>\n      <div>back</div>\n    </brick-flipbox>\n  );\n}
\n

Використання React у ваших веб-компонентах

\n
class XSearch extends HTMLElement {\n  connectedCallback() {\n    const mountPoint = document.createElement('span');\n    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);\n\n    const name = this.getAttribute('name');\n    const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);\n    ReactDOM.render(<a href={url}>{name}</a>, mountPoint);\n  }\n}\ncustomElements.define('x-search', XSearch);
\n
\n

Примітка:

\n

Цей код не буде працювати, якщо ви перетворюєте класи за допомогою Babel. Див. це питання з обговоренням.\nДодайте custom-elements-es5-adapter перед завантаженням веб-компонентів, щоб вирішити цю проблему.

\n
","frontmatter":{"title":"Веб-компоненти","next":null,"prev":null},"fields":{"path":"content/docs/web-components.md","slug":"docs/web-components.html"}}},"pageContext":{"slug":"docs/web-components.html"}},"staticQueryHashes":[]}