Question

我想要实现的是通过Javascript将单个反应组件动态添加到vanilla（或任何其他项目）的能力。

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

例如：我在React中创建一个组件，构建项目并创建一个bundle。让我们说我打电话给＆＃34; mycomponent.js＆＃34;

有没有办法在不相关的项目中将该文件包含在HTML脚本标记或捆绑器中，然后使用以下命令将其动态添加到DOM中：

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

Answer 1

是的，你可以，你只需要设置一个安装节点来做出反应来渲染你的组件。类似的东西：

<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

呈现整个页面

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

1 个答案: