React и веб-компоненты созданы для решения различных задач. Веб-компоненты обеспечивают надежную инкапсуляцию для повторно используемых компонентов, в то время как React предоставляет декларативную библиотеку, которая поддерживает DOM в синхронизации с вашими данными. Эти две цели являются взаимодополняющими. Как разработчик, вы можете использовать React в своих веб-компонентах или использовать веб-компоненты в React или оба.

Большинство пользователей, использующих React, не используют веб-компоненты, но вы, возможно, захотите, особенно если вы используете сторонние компоненты пользовательского интерфейса, которые написаны с использованием веб-компонентов.

Использование веб-компонентов в действии

class HelloMessage extends React.Component {
  render() {
    return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
  }
}

Заметка:

Веб-компоненты часто предоставляют императивный API. Например, videoвеб-компонент может отображаться play() и pause() функционировать. Чтобы получить доступ к императивным API-интерфейсам веб-компонента, вам нужно будет использовать ref для непосредственного взаимодействия с узлом DOM. Если вы используете сторонние веб-компоненты, лучшим решением является запись компонента React, который ведет себя как оболочка для вашего веб-компонента.

События, выпущенные веб-компонентом, могут неправильно распространяться через дерево рендеринга React. Вам нужно будет вручную привязать обработчики событий для обработки этих событий в ваших компонентах React.

Одна общая путаница в том, что веб-компоненты используют «класс» вместо «className».

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

 Использование React в ваших веб-компонентах

class XSearch extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('span');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);

    const name = this.getAttribute('name');
    const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
    ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
  }
}
customElements.define('x-search', XSearch);

Заметка:

Этот код не будет работать, если вы измените классы с помощью Babel. См. Этот вопрос для обсуждения. Включите адаптер custom-elements-es5, прежде чем загружать веб-компоненты, чтобы исправить эту проблему.