React 转 Web 组件

@r2wc/react-to-web-component 可以将 React 组件转换为自定义元素！它允许您将 React 组件作为原生元素共享，这些元素不需要通过 React 挂载。自定义元素充当底层 React 组件的包装器。您可以在任何使用 HTML 的项目中使用这些自定义元素，甚至在任何框架（vue、svelte、angular、ember、canjs）中使用，就像使用标准 HTML 元素一样。

注意：此包的最新版本仅适用于 React 18。如果您使用的是 React 16 或 17，请使用版本 1。

@r2wc/react-to-web-component：

适用于所有现代浏览器。（Edge 需要 customElements 填充）。
压缩并 gzip 后仅 1.26KB。

设置

从 npm 安装：

npm install @r2wc/react-to-web-component

需要帮助或有问题？

本项目由 Bitovi，一家 React 咨询公司提供支持。您可以通过以下方式获得帮助或提问：

或者，您可以雇用我们进行培训、咨询或开发。安排免费咨询。

基本用法

对于基本用法，我们将使用这个简单的 React 组件：

const Greeting = () => {
  return <h1>Hello, World!</h1>
}

完成 React 组件后，我们只需调用 r2wc 和 customElements.define 来创建和定义我们的自定义元素：

import r2wc from "@r2wc/react-to-web-component"

const WebGreeting = r2wc(Greeting)

customElements.define("web-greeting", WebGreeting)

现在我们可以像使用任何其他 HTML 元素一样使用 <web-greeting>！

<body>
  <h1>Greeting Demo</h1>

  <web-greeting></web-greeting>
</body>

在上述情况下，web-greeting 自定义元素没有使用 Greeting 组件中的 name 属性。

使用属性

默认情况下，由 r2wc 创建的自定义元素只将属性传递给底层 React 组件。要使属性生效，您必须指定组件的 props。

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>
}

const WebGreeting = r2wc(Greeting, {
  props: {
    name: "string",
  },
})

现在 r2wc 将知道查找 name 属性，如下所示：

<body>
  <h1>Greeting Demo</h1>

  <web-greeting name="Justin"></web-greeting>
</body>

对于需要更高级用法的 Web 组件项目，请参阅我们的程序化用法和声明式演示。

我们还有一个使用第三方库的完整示例。

示例

Hello World - 典型的软件演示！
所有 Props - R2WC 支持的所有 prop 转换类型的演示。
Header 示例 - 一个可重用的 Header 组件示例。
MUI 按钮 - 一个使用 MUI 按钮和主题自定义的示例应用。
清单演示 - 一个清单应用示例。

博客文章

使用 Vite 的 R2WC 查看文章

使用 Create React App (CRA) 的 R2WC 查看文章

工作原理

查看我们的完整 API 文档。

在底层，r2wc 创建了一个 CustomElementConstructor，带有自定义的 getter/setter 和生命周期方法，用于跟踪您定义的 props。当设置属性时，其自定义 setter：

在自定义元素内重新渲染 React 组件。
在实例上创建一个可枚举的 getter / setter 以保存设置的值，避免将来再次访问代理。

此外：

自定义元素上的可枚举属性和值用作传递给 React 组件的 props。
只有当自定义元素插入到页面中时，React 组件才会被渲染。

我们希望听到您的声音。

加入我们的 Bitovi 社区 Discord，与我们讨论开源项目。

关注我们的 Twitter，了解我们的最新动态。