React 和 Web 组件可以在 Web 应用程序中混合使用。一个 react 组件可以有一个或多个 Web 组件，而 Web 组件可以使用 react 组件来创建其内容。react 支持这两个选项。
在 react 应用程序中使用 Web 组件
让我们创建一个 Web 组件，然后尝试在 react 应用程序中应用它。首先，创建一个新的 react 应用程序并使用以下命令启动它。
create-react-app myapp
cd myapp
npm start
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 组件
最后，在浏览器中打开应用程序并检查最终结果。
总结
React 和 Web 组件以一种很好的方式相互补充。每种方法都有其自身的优点和缺点，可以通过分析其与应用程序相关的优缺点在单个应用程序中使用。
