Question

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

我打算用React在现有的应用程序中构建新的屏幕。不过我想知道，如何通过点击现有导航中的按钮/链接来渲染React屏幕？

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

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

Answer 1

使用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]);
});