Javascript 如何在普通HTML/JS中重新加载ReactJS组件？

这可能是个愚蠢的问题。但本质上，我正在创建一个React模式组件，可以在任何普通HTML/JS文件中使用。我可以使用Webpack从我的React组件创建一个bundle.js文件，然后可以将其注入到普通HTML文件的div标记中，如下所示：

<div id="my-modal-target"></div>
<script src="bundle.js"></script>

由于我试图创建一个模式，所以每当用户单击“退出”时，我的React组件都会有条件地将该模式隐藏起来。但是，我试图通过单击目标HTML文件中的按钮来了解如何重新加载React组件。如能就我应如何进行提出任何建议，我将不胜感激。以下是我尝试过的一些东西：

• 使用“ReactDOM.unmountComponentAtNode（document.getElementById（DIV_TAG_NAME））；”强制从目标HTML中的DIV标记卸载React组件，然后使用JQuery重新加载DIV标记。但是，这似乎会导致CORS问题，不允许我重新加载div标签。此外，这似乎不是一个好的做法
• 在香草HTML文件中单击按钮时，它会将一个道具传递到React组件中。但是，这似乎不起作用，因为道具只有在第一次加载React组件时才会传入。换句话说，如果更改香草HTML文件中的道具，则不会影响React组件

---

提前非常感谢您的帮助

您可以通过多种方式完成反应式/非反应式沟通

使用自定义事件 虽然每种方法都有其优缺点，但这一方法的优点是框架不可知。您也可以对Vue组件和vanilla js执行同样的操作。缺点是你需要找到一种干净的方式来管理和记录事件，否则你的应用程序会很快变得无法维护

---

在组件内部，您需要创建并侦听自定义事件。然后，您可以从任何地方分派它，组件将捕获它并相应地进行更新

const OPEN_EVENT_NAME='OPEN'；
const CLOSE_EVENT_NAME='CLOSE'；
const container=document.querySelector（“#app”）；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
开放：是的，
}
//将“打开”和“关闭”事件绑定到各自的功能
container.addEventListener（打开事件名称，this.openmodel）；
container.addEventListener（关闭事件名称，this.closeModal）；
}
OpenModel=（）=>{
this.setState（{open:true}）；
}
closeModal=（）=>{
this.setState（{open:false}）；
}
render（）{
返回(
模式为{this.state.open？'open'：'closed'}
)
};
}
render（，容器）；
//创建自定义事件
const openEvent=新事件（打开事件名称）；
const closeEvent=新事件（关闭事件名称）；
//创建事件调度器
const openModal=（）=>container.dispatchEvent（openEvent）；
const closeModal=（）=>container.dispatchEvent（closeEvent）；
//单击按钮发送事件
document.querySelector（“#open btn”）.addEventListener（'click'，openmodel）；
document.querySelector（“#close btn”）.addEventListener（'click'，closeModal）
正文{
字体系列：“系统用户界面”；
填充：12px；
}
氢{
字体大小：粗体；
保证金：0；
边缘底部：6px；
}
人力资源{
边际：12px0；
}

这是反应

这不是反应
开放模态
闭合模态
你好，朱利安。我尝试了“ref”示例。你知道我怎么用这个来做钩子吗？现在，我有一个错误“functional components cannot be give refs”。我认为这在这种情况下不适用，因为正如您所看到的，您不能像在类组件中一样在功能组件中使用refs。如果我要设计这样一个使用React作为视图层的库，我会添加一个包装器javascript类，作为一个更好的API与组件交互。我用这样一个实现的例子更新了我的答案。