懂AI
react-to-web-component

react-to-web-component

React组件转原生Web组件的轻量级解决方案

react-to-web-component是一个将React组件转换为自定义元素的工具库。它使开发者能够将React组件转化为原生Web组件，无需React环境即可使用。该工具兼容现代浏览器，体积仅1.26KB，提供简洁API和属性传递功能。它可与任何基于HTML的项目集成，包括各种前端框架。这个工具特别适合需要在非React环境中复用React组件的项目，或者希望提高组件复用性和跨框架兼容性的开发团队。项目由Bitovi公司维护，提供社区和专业支持。

ReactWeb Component自定义元素前端开发跨框架组件Github开源项目
GitHub文档

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 组件项目，请参阅我们的程序化用法和声明式演示。

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

示例

博客文章

使用 Vite 的 R2WC 查看文章

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

工作原理

查看我们的完整 API 文档。

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

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

此外：

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

我们希望听到您的声音。

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

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

编辑推荐精选

Vora

Vora

免费创建高清无水印Sora视频

Vora是一个免费创建高清无水印Sora视频的AI工具

Refly.AI

Refly.AI

最适合小白的AI自动化工作流平台

无需编码，轻松生成可复用、可变现的AI自动化工作流

酷表ChatExcel

酷表ChatExcel

大模型驱动的Excel数据处理工具

基于大模型交互的表格处理系统，允许用户通过对话方式完成数据整理和可视化分析。系统采用机器学习算法解析用户指令，自动执行排序、公式计算和数据透视等操作，支持多种文件格式导入导出。数据处理响应速度保持在0.8秒以内，支持超过100万行数据的即时分析。

AI工具酷表ChatExcelAI智能客服AI营销产品使用教程
TRAE编程

TRAE编程

AI辅助编程，代码自动修复

Trae是一种自适应的集成开发环境（IDE），通过自动化和多元协作改变开发流程。利用Trae，团队能够更快速、精确地编写和部署代码，从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能，是提升开发效率的理想工具。

AI工具TraeAI IDE协作生产力转型热门
AIWritePaper论文写作

AIWritePaper论文写作

AI论文写作指导平台

AIWritePaper论文写作是一站式AI论文写作辅助工具，简化了选题、文献检索至论文撰写的整个过程。通过简单设定，平台可快速生成高质量论文大纲和全文，配合图表、参考文献等一应俱全，同时提供开题报告和答辩PPT等增值服务，保障数据安全，有效提升写作效率和论文质量。

AI辅助写作AI工具AI论文工具论文写作智能生成大纲数据安全AI助手热门
博思AIPPT

博思AIPPT

AI一键生成PPT，就用博思AIPPT！

博思AIPPT，新一代的AI生成PPT平台，支持智能生成PPT、AI美化PPT、文本&链接生成PPT、导入Word/PDF/Markdown文档生成PPT等，内置海量精美PPT模板，涵盖商务、教育、科技等不同风格，同时针对每个页面提供多种版式，一键自适应切换，完美适配各种办公场景。

AI办公办公工具AI工具博思AIPPTAI生成PPT智能排版海量精品模板AI创作热门
潮际好麦

潮际好麦

AI赋能电商视觉革命，一站式智能商拍平台

潮际好麦深耕服装行业，是国内AI试衣效果最好的软件。使用先进AIGC能力为电商卖家批量提供优质的、低成本的商拍图。合作品牌有Shein、Lazada、安踏、百丽等65个国内外头部品牌，以及国内10万+淘宝、天猫、京东等主流平台的品牌商家，为卖家节省将近85%的出图成本，提升约3倍出图效率，让品牌能够快速上架。

iTerms

iTerms

企业专属的AI法律顾问

iTerms是法大大集团旗下法律子品牌，基于最先进的大语言模型(LLM)、专业的法律知识库和强大的智能体架构，帮助企业扫清合规障碍，筑牢风控防线，成为您企业专属的AI法律顾问。

SimilarWeb流量提升

SimilarWeb流量提升

稳定高效的流量提升解决方案，助力品牌曝光

稳定高效的流量提升解决方案，助力品牌曝光

Sora2视频免费生成

Sora2视频免费生成

最新版Sora2模型免费使用，一键生成无水印视频

最新版Sora2模型免费使用，一键生成无水印视频

下拉加载更多