此文章是翻译Web Components这篇React（版本v16.2.0）官方文档。

Web Components

React 和Web 组件（Web Component）分别用来构建解决不同的问题。Web 组件提供了强大的可复用组件的封装，React 提供了一个声明式库来保持DOM 和你的数据的同步。这两个目标是互补的。作为一个开发者，你可以自由的在你的Web 组件中使用React，或者在React 中使用Web 组件，后者两者同时使用。

大多数使用React 的人不使用Web 组件，但是如果你想要，尤其是使用Web 组件写的第三方UI 组件。

Using Web Components in React

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

注意：

Web 组件通常提供一个命令式（imperative）API。例如，一个video Web 组件可能暴露play()和pause() 方法。为了访问Web 组件的命令式API，你需要使用一个ref 同DOM 节点直接交互。如果你正在使用第三方的Web 组件，最好的解决方案是写一个React 组件作为Web 组件的包装器（wrapper）。

通过Web 组件发出的事件不能正确的在React 渲染树中冒泡。你需要手动的在你的React 组件中绑定这些事件句柄去控制这些事件。

一个常见的困惑是在Web 组件中使用“class” 而不是“className”。

  1. function BrickFlipbox() {
  2.   return (
  3.     <brick-flipbox class="demo">
  4.       <div>front<div>
  5.       <div>back</div>
  6.     </brick-flipbox>
  7.   );
  8. }

Using React in your Web Components

  1. class XSearch extends HTMLElement {
  2.   attachedCallback() {
  3.     const mountPoint = document.createElement('span');
  4.     this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
  6.     const name = this.getAttribute('name');
  7.     const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
  8.     ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
  9.   }
  10. }
  11. customElements.define('x-search', XSearch);

注意：

如果使用Babel 转换类，则此代码 无效。查看这个问题的讨论。包括custom-elements-es5-adapter，在你加载你的Web 组件来解决这一问题之前。