我有一个用 jQuery/HTML 构建的现有单页应用程序。我无法在 React 中重写现有的应用程序，因为它非常大。
我计划使用 React 在现有应用程序中构建新屏幕。但是我想知道，如何在点击现有导航中的按钮/链接时呈现 React 屏幕？
有点像，点击处理函数是一个普通的 JavaScript，它在 React 组件之外，在处理函数内部，我必须编写代码来加载在 React 组件中创建的新屏幕。
我没有直接在 index.html 中包含 react.js 和 react-dom.js，而是使用 babel 和 webpack 创建一个 bundle.js。所以在 bundle.js 之外访问 ReactDOM.render 会抛出错误。
【问题讨论】：
标签： javascript jquery reactjs react-redux
使用 React，您可以使用 ReactDOM.render 将使用 React 组件创建的布局附加到 DOM。
附加到哪个 DOM 节点或何时调用该函数并不重要。通常的方法是在页面加载时执行此操作，但您也可以在单击按钮时执行此操作。
它可能看起来像这样：
$('#my-button').click(() => ReactDOM.render(<MyApp />, $('#my-container')[0]);
在这个例子中，<MyApp /> 是你的 React 布局的根组件，my-container 是你想要放置 React 布局的页面上的某个 div。
如果你现有的页面没有使用任何像 webpack 这样的模块打包器，你就不能轻易地导入 ReactDOM 或在你的纯 jQuery 代码中使用 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]);
});
【讨论】：