我有一个使用jQuery / HTML构建的单页应用程序。我无法在React中重写现有应用程序，因为它很大。
我计划使用React在现有应用程序中构建新屏幕。但是我想知道，如何从现有导航中单击按钮/链接来渲染React屏幕？
就像单击处理程序函数是正常的JavaScript，它位于React组件之外，并且在处理函数中，我必须编写代码以加载由React组件制作的新屏幕。
我没有在index.html中直接包含react.js和react-dom.js，而是通过使用babel和webpack创建bundle.js。因此，在bundle.js之外访问ReactDOM.render会引发错误。
使用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]);
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句