目前，我正在做类似的事情。
该应用程序不是完整的React App，我使用React进行动态处理，例如aututark的CommentBox。并且可以包含在具有特殊参数的任何点。
但是，我所有的子应用程序都已加载并包含在一个文件中
all.js，因此浏览器可以跨页面对其进行缓存。
当我需要将应用程序包含在SSR模板中时，我只需要包含DIV，其类为“ __react-root”和一个特殊ID（要呈现的React App的名称）
逻辑非常简单：
import CommentBox from './apps/CommentBox';import OtherApp from './apps/OtherApp';const APPS = { CommentBox, OtherApp};function renderAppInElement(el) { var App = APPS[el.id]; if (!App) return; // get props from elements data attribute, like the post_id const props = Object.assign({}, el.dataset); ReactDOM.render(<App {...props} />, el);}document .querySelectorAll('.__react-root') .forEach(renderAppInElement)<div>Some Article</div><div id="CommentBox" data-post_id="10" ></div><script src="/all.js"></script>
编辑
由于webpack完全支持代码拆分和LazyLoading，因此我认为有必要提供一个示例，其中您无需将所有应用程序打包到一个捆绑包中，而是将它们拆分并按需加载。
import React from 'react';import ReactDOM from 'react-dom';const apps = { 'One': () => import('./One'), 'Two': () => import('./Two'),}const renderAppInElement = (el) => { if (apps[el.id]) { apps[el.id]().then((App) => { ReactDOM.render(<App {...el.dataset} />, el); }); }}
