此文章是翻译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

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

注意:

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

通过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

class XSearch extends HTMLElement {
  attachedCallback() {
    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);

注意:

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

results matching ""

    No results matching ""