React学习之进阶WEB组件（二十）

React和WEB组件

React和WEB组件涉及不同领域，分别解决不同的问题，WEB组件提供组件的可复用性，而React确保数据的一致性，你可以在WEB组件中使用React，也可以在React中使用WEB组件。

很多人在使用React时都不会使用WEB组件，但是可能你想使用第三方UI组件，极可能进行混用了。

1.在React中使用WEB组件

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

x-search就外部实现的WEB组件

说明

WEB组件一般会提供一个命令式的API，比如一个videoWEB组件，就可能提供play和pause函数，如果你想使用这些命令式API的话，就需要在渲染DOM时使用ref(如果不了解ref的，可以看我的博客)，这个可以将WEB组件的实例传递给React中，从而进行响应的操作。如果你是直接使用第三方已经写好的WEB组件的话，最好的方法就是在React中写一个React组件包裹住这个WEB组件。

可能WEB组件事件的触发无法通过React的组件传递下来，所以你需要自己将这些函数响应绑定到React组件上。

需要注意的是

WEB组件中使用的类名是class，而不是className

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

2.在WEB组件中使用React

const proto = Object.create(HTMLElement.prototype, {
  attachedCallback: {
    value: function() {
      const mountPoint = document.createElement('span');
      this.createShadowRoot().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);
    }
  }
});
document.registerElement('x-search', {prototype: proto});
//此函数是注册一个HTML标签

下一篇将讲React的高级组件