美文网首页
10.Web Components(web组件)

10.Web Components(web组件)

作者: 前端xiyoki | 来源:发表于2017-02-19 12:57 被阅读0次

React版本:15.4.2
**翻译:xiyoki **

React和Web组件用于解决不同的问题。Web组件为可重用组件提供了强大的封装,而React提供了一个声明库,使DOM与你的数据保持同步。这两个目标是互补的。作为开发人员,你可以在你的Web组件中使用React,或者在React中使用Web组件,或者两者兼有。
大多数使用React的人不使用Web组件,但或许你希望使用,特别是你正在使用由Web组件编写而成的第三方UI组件。

Using Web Components in React(在React中使用Web组件)

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

注意:
Web组件经常暴露一些命令式API。例如,一个videoWeb组件可能会暴露play()pause() 函数。要访问Web组件的命令式API,你需要使用ref与DOM节点直接交互。如果你使用的是第三方Web组件,最好的解决方案是编写一个React组件,作为Web组件的包装器。

Web组件发出的事件可能无法通过React渲染树正确传播。你将需要手动添加事件处理程序来处理React组件中的这些事件。

一个常易混淆的地方是Web组件使用'class'而不是'className'。

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

Using React in your Web Components(在你的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});

查看完整示例 complete Web Components example on GitHub

相关文章

  • 10.Web Components(web组件)

    React版本:15.4.2**翻译:xiyoki ** React和Web组件用于解决不同的问题。Web组件为可...

  • Vue | 组件化 | 基本操作

    来个目录: 瞎掰组件概念 web components 是个什么东西 用 web components 来写一个简...

  • web组件标准 web components

    组件的概念 组件,是数据和方法的一个封装,其定义了一个可重用的软件元素的功能,展示和使用,通常表现为一个或一组可重...

  • Vue-基础语法(三)

    组件化开发 一、组件概念组件化规范:Web Components 浏览器支持不好,vue 实现了这个规范https...

  • 未来学习规划

    了解Web Components开发;zh-Web_Components、en-Web_Components 了解...

  • 基于 Custom Elements 的组件化开发

    customElements 是 Web Components 规范下的新 API,可以用来实现组件化开发。 如果...

  • 解读 Vue 之插槽 (slot)(未完,待续···)

    (一)前言 【MDN】HTML 元素 ,作为 Web Components 技术套件的一部分,是Web组件内的一...

  • Web Components

    作用: Web组件化,可复用UI模块。 标准: Web Components不是单一的规范,而是一系列的技术组成,...

  • vue 组件开发

    vue 提供了组件开发模型,使开发大中型web应用更加的方便。 vue的组件的概念包括components、tem...

  • 组件化开发

    组件化开发思想 标准 分治 重用 组合组件开发规范:Web Components通过封装好功能的定制元素(自定义标...

网友评论

      本文标题:10.Web Components(web组件)

      本文链接:https://www.haomeiwen.com/subject/hqhjwttx.html