使用「react-to-webcomponent」库，在vite + React中创建Web组件

1 年 ago

逸, 科

2 minutes

为什么选择用React而不是Lit或Preact来创建Web组件？

因为有一个只能在React中运行的库

怎么制作呢？

首先，使用pnpm create vite命令创建一个React＋TypeScript的开发环境。
请假设您已经进入了相应的文件夹。

npm install -D react-to-webcomponent

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <my-element name="yuumillar"></my-element>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

用这样的方式，使用my-element。平时是像

这样的，将其变成我自己创建的Web组件。

import React from "react";
import ReactDOM from "react-dom/client";
import r2wc from "react-to-webcomponent";
import { App } from "./App";

const myElement = r2wc(App, React, ReactDOM, {
  props: {
    name: "string",
  },
});

customElements.define("my-element", myElement);

我会这样定义my-element。

type AppProps = {
  name: string;
};
export const App = ({ name }: AppProps) => <div>{name}</div>;

这是最基本的实现。当你改变HTML中的 props 时，App.tsx 中的 name 属性也会改变。

使用编译后的产物的方法是什么？

执行npm run build，如往常一样，创建dist文件夹。只需加载其中的js文件，即可使用Web Components。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <my-element name="yuumillar"></my-element>
    <script type="module" src="/dist/src_main.tsx.1e2b0b6f.js"></script>
  </body>

这种感觉啊。
你可以将它作为组件在喜欢的地方处理。即使在使用PHP的遗留系统中，也可以使用React。真方便啊。