ReactJS - Web 组件

React 和 Web 组件可以在 Web 应用程序中混合使用。一个 react 组件可以有一个或多个 Web 组件，而 Web 组件可以使用 react 组件来创建其内容。react 支持这两个选项。

在 react 应用程序中使用 Web 组件

让我们创建一个 Web 组件，然后尝试在 react 应用程序中应用它。首先，创建一个新的 react 应用程序并使用以下命令启动它。

create-react-app myapp
cd myapp
npm start

接下来，打开 App.css （src/App.css）并删除所有 CSS 类。


 // remove all css classes

接下来，创建一个简单的 Web 组件 HelloMessage （public/WebComponents/HelloMessage.js）并添加以下代码。Web 组件（）的用途是欢迎用户（通过在 Web 组件的 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 组件的内容。
observedAttributes 函数访问 name 属性。
attributeChangedCallback 函数将更新 name 属性的值（如果在应用程序中发生更改）。
customElements.define 用于将创建的带有标签名称的 Web 组件附加到 Web 文档中。

接下来，打开 index.html （public/index.html）文件并添加 Web 组件，如下所示 -


<!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>

在这里，我们有，

在头部部分包含了 Web 组件
在页面中使用了你好消息 Web 组件来展示其使用情况

接下来，创建一个简单的组件 SimpleWebComponent （src/Components/SimpleWebComponent.js）并渲染新创建的 Web 组件，如下所示 -


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 组件你好在组件的 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 组件并渲染了你好 Web 组件

最后，在浏览器中打开应用程序并检查最终结果。

Web Components React Application

总结

React 和 Web 组件以一种很好的方式相互补充。每种方法都有其自身的优点和缺点，可以通过分析其与应用程序相关的优缺点在单个应用程序中使用。

本页