Javascript 如何在jQuery上单击在现有jQuery应用程序中加载React组件

我在jQuery/HTML中构建了一个现有的单页应用程序。我无法在React中重写现有的应用程序，因为它非常大

我计划使用React在现有应用程序中构建新屏幕。然而，我想知道，如何从现有的导航中点击按钮/链接来呈现React屏幕

这类似于，点击处理函数是一个普通的JavaScript，它位于React组件之外，在处理函数内部，我必须编写代码来加载React组件中创建的新屏幕

我不是直接在index.html中包含react.js和react-dom.js，而是使用babel和webpack创建bundle.js。因此，在bundle.js外部访问ReactDOM.render会引发错误。

使用React，可以将使用React组件创建的布局附加到DOM

连接到哪个DOM节点或何时调用该函数实际上并不重要。通常的方法是在页面加载时执行，但也可以在单击按钮时执行

它可能看起来像这样：

$('#my-button').click(() => ReactDOM.render(<MyApp />, $('#my-container')[0]);

在HTML页面上的jQuery代码中，按如下方式调用函数：

$('#my-button').click(function() {
  window.renderMyReactApp($('#my-container')[0]);
});

---

谢谢你的回复。很抱歉，我忘了提到我没有在html中直接包含react.js或react-dom.js。相反，我正在使用babel和webpack创建一个捆绑包。因此，在bundle.js外部访问ReactDOM.render会引发错误。请提出您的想法。您是否使用webpack或其他捆绑工具来捆绑现有的jQuery代码？不，我甚至不捆绑现有的jQuery代码。。这就像在单击时加载每个html，其中包含相应的js和css。我知道这是一个非常古老的架构，但我不能改变现有的应用程序，因为它太大了。谢谢你更新的答案，太棒了！我从你的回答中得到了一些想法。

$('#my-button').click(function() {
  window.renderMyReactApp($('#my-container')[0]);
});