ReactJS - Web Components

React 和 Web Components 可以混合在 Web 應用程式中。React 元件可以包含一個或多個 Web Components，而 Web Components 可以使用 React 元件來建立其內容。React 支援這兩種選項。

在 React 應用程式中使用 Web Components

讓我們建立一個 Web Components，然後嘗試將其應用於 React 應用程式。首先，建立一個新的 React 應用程式並使用以下命令啟動它。

create-react-app myapp
cd myapp
npm start

接下來，開啟 App.css (src/App.css) 並刪除所有 CSS 類。

// remove all css classes

接下來，建立一個簡單的 Web Components，HelloMessage (public/WebComponents/HelloMessage.js) 並新增以下程式碼。該 Web Components 的目的是歡迎使用者（透過在 Web Components 的 name 屬性中指定使用者名稱）。

// web component
class HelloMessage extends HTMLElement {
   constructor() {
      super();
      this.name = 'Folks';
   }
   static get observedAttributes() {
      return ['name'];
   }
   attributeChangedCallback(property, oldValue, newValue) {
      if (oldValue === newValue) return;
      this[property] = newValue;
   }
   connectedCallback() {
      this.textContent = `Hello ${this.name}!`;
   }
}
customElements.define('hello-message', HelloMessage);

這裡，

connectedCallback() 用於建立 Web Components 的內容。
observedAttributes 函式訪問 name 屬性。
attributeChangedCallback 函式更新 name 屬性的值，如果它在應用程式中發生更改。
customElements.define 用於將建立的 Web Components 與標籤名稱附加到 Web 文件中。

接下來，開啟 index.html (public/index.html) 檔案，並新增如下所示的 Web Components：

<!DOCTYPE html>
<html lang="en">
   <head>
      <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
      <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
      <script src="%PUBLIC_URL%/WebComponents/HelloMessage.js"></script>
   </head>
   <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div style="padding: 10px;">
         <div id="root"></div>
         <div style="padding: 10px;">
            <hello-message name="John"></hello-message>
         </div>
      </div>
   </body>
</html>

這裡我們有，

在 head 部分包含了 Web Components
在頁面中使用了 hello-message Web Components 來展示其用法

接下來，建立一個簡單的元件，SimpleWebComponent (src/Components/SimpleWebComponent.js) 並渲染新建立的 Web Components，如下所示：

import React from "react";
class SimpleWebComponent extends React.Component {
   constructor(props) {
      super(props)
   }
   render() {
      return (
         <hello-message name="Peter"></hello-message>
      );
   }
}
export default SimpleWebComponent;

這裡，Web Components hello 用於元件的 render 方法中。

接下來，開啟 App 元件 (src/App.js)，並使用 SimpleWebComponent 元件，如下所示：

import './App.css'
import React from 'react';
import SimpleWebComponent from './Components/SimpleWebComponent'
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleWebComponent />
            </div>
         </div>
      </div>
   );
}
export default App;

這裡我們有，

從 React 包中匯入了 SimpleWebComponent 元件
使用了 SimpleWebComponent 元件並渲染了 hello Web Components

最後，在瀏覽器中開啟應用程式並檢查最終結果。

總結

React 和 Web Components 以一種很好的方式相互補充。每個都有其自身的優點和缺點，並且可以透過分析其相對於應用程式的優缺點在單個應用程式中使用。

列印頁面