javascript - 我可以通过 Javascript 在非 React 环境中包含单个 React 组件吗？

Question

我想要实现的是通过 Javascript 动态地将单个 React 组件添加到普通项目(或任何其他项目)的能力。

本质上是一个 Web 组件，没有兼容性问题。

例如:我在 React 中创建一个组件，构建项目并生成一个包。假设我将该包称为“mycomponent.js”

有没有办法将该文件包含在不相关的项目中，无论是在 HTML 脚本标签还是 bundler 中，然后将其动态添加到 DOM:

const elRef = new myCustomElement() //or some other syntax
elRef.customEvent = (data) => { console.log(data) }
document.body.appendChild(elRef)

Answer 1

是的，你可以，你只需要设置一个挂载节点来 react 渲染你的组件。像这样的东西:

<div>
  <!-- rest of your page -->
  <div id="root"></div>
  <!-- rest of your page -->
</div>

//Somewhere in your JS
React.render(<YourComponent />, document.getElementById("root"));

React 不会更改其安装的 DOM 节点之外的任何内容，因此如果您愿意，您可以拥有一个完整的页面并仅使用 React 渲染一些小部件。你不需要用react渲染整个页面