Web Component - Githubissues

React and Web Components are built to solve different problems. Web Components provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary. As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both.

Most people who use React don’t use Web Components, but you may want to, especially if you are using third-party UI components that are written using Web Components.

React和Web Componet是用来解决不同的问题的。Web Components 为了可重用组件，提供了强封装，而React提供了一个声明式的库来保证数据与DOM的同步。两个目标是相互补的。作为一个开发者，你们可以随便在Web Component中使用React，或者相反，或者两种都用。

大多数用React的人，都不用Web Component。但你也许会想要用。尤其是你在使用Web Component所写的第三方的UI组件。

Using Web Components in React

在React中使用Web Component。

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

Note:

Web Components often expose an imperative API. For instance, a video Web Component might expose play() and pause() functions. To access the imperative APIs of a Web Component, you will need to use a ref to interact with the DOM node directly. If you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.

Events emitted by a Web Component may not properly propagate through a React render tree. You will need to manually attach event handlers to handle these events within your React components.

注意： Web Component通常暴露命令式的api。举例，一个视频Web Component可能会暴露play，和pause两个函数。可以使用ref来直接与DOM节点进行交互，来获取Web Component的命令式api。如果你在使用第三方Web Component，最好的解决方案是写一个React组件包装在Web Component之外。

由Web Component触发的事件也许不会正确的在React的render树上进行传播。你需要手动添加事件监听来处理这些组件上的事件。

One common confusion is that Web Components use “class” instead of “className”.

一个常见的问题就是Web Component使用class而不是className。

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

Using React in your Web Components 在Web Component中使用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);

Note:

This code will not work if you transform classes with Babel. See this issue for the discussion. Include the custom-elements-es5-adapter before you load your web components to fix this issue.

注意：如果这段代码用babel转换就会不能使用。未解决这个问题，在加载Web Component之前需要先导入custom-elements-es5-adapter。

shoutingwei / react-learning

Web Component #9