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 以一种很好的方式相互补充。每个都有其自身的优点和缺点，并且可以通过分析其相对于应用程序的优缺点在单个应用程序中使用。

打印页面