Веб-компоненты

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

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

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

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

Замечания:

Веб-компоненты часто предоставляют императивный API. Например, веб-компонент видео может предоставлять функции play () и pause (). Чтобы получить доступ к обязательным API-интерфейсам веб-компонента, вам потребуется использовать ссылку для непосредственного взаимодействия с узлом 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-adapter перед загрузкой веб-компонентов для решения этой проблемы.