remount

重新安装

在你的任何地方使用你的 React 组件
HTML 作为 Web 组件（自定义元素）。

演示 ⚡ 文档
2kb gzip'd · 无依赖项 · IE 支持

安装

可以通过 npm 包存储库重新安装。需要反应 18。

 # npm
npm install remount react react-dom
# yarn
yarn add remount react react-dom

• 通过纱线： yarn add remount
• 或 npm： npm install remount

用法

让我们从任何 React 组件开始。这是一个：

 const Greeter = ( { name } ) => {
  return < div > Hello, { name } ! < / div >
}

使用define()定义自定义元素。让我们定义一个<x-greeter>元素：

 import { define } from 'remount'

define ( { 'x-greeter' : Greeter } )

您现在可以在 HTML 中的任何位置使用它！ ？

 < x-greeter props-json =' {"name":"John"} ' > </ x-greeter >

⚡ API 文档 →

使用案例

关于为什么您可能要考虑为您的项目重新安装的一些想法：

	将 React 添加到非 SPA 应用程序 您可以在“常规”HTML 站点的任何页面上使用 React 组件。非常适合将 React 添加到基于 Rails 或 Phoenix 构建的应用程序中。
	？与其他框架的互操作 Remount 让您可以像任何其他 HTML 元素一样使用 React 组件。这意味着您可以将 React 与 Vue、Angular 或任何其他 DOM 库/框架一起使用。

更多功能

• JSON 道具（例如<x-greeter props-json="{...}"> ）（文档）
• 命名属性（例如<x-greeter name="John"> ）（文档）
• 使用自定义元素 API（如果可用）
• 回退到其他浏览器的兼容 API
• Shadow DOM 模式（如果可用）

浏览器支持

Remount 支持 React 18 支持的所有浏览器。

如果可用 (Chrome/67+)，将使用自定义元素 API ^# （“Web 组件”），否则将回退到兼容的 API。

⚡ 浏览器支持文档 →

文档

• API文档
• 构建 - 还提供 ES2015+ 和 ES Module 构建。
• 常见问题解答和故障排除 — 如果您发现任何问题，请从这里开始。
• 与替代方案的比较
• 浏览器支持

谢谢

重新安装© 2022，Rico Sta。克鲁兹。根据 MIT 许可证发布。
由 Rico Sta 创作和维护。克鲁兹在贡献者的帮助下（列表）。

ricostacruz.com · GitHub @rstacruz · Twitter @rstacruz