在多页面应用程序中使用React

在多页面应用程序中使用React

目前，我正在做类似的事情。

该应用程序不是完整的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);    });  }}