我有一个现有的jQuery/HTML单页应用程序构建。我无法在 React 中重写现有应用程序，因为它非常大。
我计划使用 React 在现有应用程序中构建新屏幕。但是我想知道，如何在单击现有导航中的按钮/链接时渲染 React 屏幕？
就像，点击处理程序函数是一个普通的JavaScript，它在React组件之外，在处理程序函数内部，我必须编写代码来加载在React Component中制作的新屏幕。
我没有直接在index.html中包含react.js和react-dom.js，而是通过使用babel和webpack创建一个捆绑包.js。因此，在捆绑包外部访问 ReactDOM.render .js 会抛出错误。
使用 React，您可以使用 ReactDOM.render 将使用 React 组件创建的布局附加到 DOM。
连接到哪个 DOM 节点或何时调用该函数并不重要。通常的方法是在页面加载时执行此操作，但是您也可以在单击按钮时执行此操作。
它可能看起来像这样：
$('#my-button').click(() => ReactDOM.render(<MyApp />, $('#my-container')[0]);
在这个例子中，<MyApp />React 布局的根组件，my-container是你想要放置 React 布局的页面上的一些div。
如果我不使用模块捆绑器怎么办？
如果你的现有页面不使用任何模块捆绑器，如 webpack，你就不能在纯 jQuery 代码中轻松导入ReactDOM或使用 JSX 表示法。
在这种情况下，设置一个 webpack 构建来创建 React 布局并公开一个将 React 布局添加到 DOM 的全局函数。一种适合初学者的方法是使用 create-react-app。
CRA 可以创建一个包含您的 JSX 代码和您需要的所有库的捆绑包。您可以使用脚本标记将其包含在页面中，就像包含jQuery库一样。
在你的 React 应用程序中，创建一个全局函数，将 React 布局添加到 DOM 中，例如：
window.renderMyReactApp = element => ReactDOM.render(<MyApp />, element);
在 HTML 页面上的 jQuery 代码中，调用函数，如下所示：
$('#my-button').click(function() {
window.renderMyReactApp($('#my-container')[0]);
});