React学习之进阶WEB组件(二十)

前端之家收集整理的这篇文章主要介绍了React学习之进阶WEB组件(二十)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

ReactWEB组件

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

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

1.在React中使用WEB组件

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

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

说明

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

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

需要注意的是

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

  1. function BrickFlipBox() {
  2. return (
  3. <brick-flipBox class="demo">//注意不是className
  4. <div>front</div>
  5. <div>back</div>
  6. </brick-flipBox>
  7. );
  8. }

2.在WEB组件中使用React

  1. const proto = Object.create(HTMLElement.prototype,{
  2. attachedCallback: {
  3. value: function() {
  4. const mountPoint = document.createElement('span');
  5. this.createShadowRoot().appendChild(mountPoint);
  6.  
  7. const name = this.getAttribute('name');
  8. const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
  9. ReactDOM.render(<a href={url}>{name}</a>,mountPoint); } } }); document.registerElement('x-search',{prototype: proto}); //此函数注册一个HTML标签

下一篇将讲React的高级组件

猜你在找的React相关文章