We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

Web Components

These docs are old and won’t be updated. Go to react.dev for the new React docs.

See Custom HTML elements in the new docs.

React 和 Web Component 是為了解決不同的問題所建立的。Web Component 為了可重複使用的 component 提供了強大的封裝,而 React 提供了一個宣告式函式庫,使 DOM 與你的資料保持同步。這兩個目標是相輔相成的。作為開發人員,你可以自由地在 Web Component 中使用 React,或在 React 中使用 Web Component,或兩者都是。

大部分使用 React 的人沒有使用 Web Component,但你可能會想要使用,尤其是你用到了使用 Web Component 所寫的第三方的 UI component。

在 React 裡使用 Web Component

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

注意:

Web Component 通常會公開命令式的 API。例如,一個 video Web Component 可能會公開 play()pause() 函式。為了能夠使用 Web Component 的命令式 API,你會需要使用 ref 來跟 DOM 節點直接互動。如果你使用第三方的 Web Component,最好的解法是寫一個 React component 來包住你的 Web Component。

Web Component 所發出的事件可能不會被正確的傳遞到 React 的 render tree。 你將會需要手動把 event handler 附加到你的 React component 內處理這些事件。

一個常見的疑惑是 Web Component 使用「class」而不是「className」。

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

在你的 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);
    const root = ReactDOM.createRoot(mountPoint);
    root.render(<a href={url}>{name}</a>);
  }
}
customElements.define('x-search', XSearch);

注意:

如果你用 Babel 轉換了 class,這段程式碼將不會正常運作。查看這個 issue 裡面的討論。 在載入 web component 之前引入 custom-elements-es5-adapter 來解決這個問題。

Is this page useful?Edit this page