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

Question

我一直在玩 React，到目前为止我真的很喜欢它。我正在使用 NodeJS 构建一个应用程序，并希望将 React 用于应用程序中的一些交互式组件。我不想让它成为单页应用程序。

我还没有在网上找到可以回答以下问题的任何内容:

如何在多页面应用中拆分或捆绑我的 React 组件？

目前我的所有组件都在一个文件中，即使我可能永远不会在应用程序的某些部分加载它们。

到目前为止，我正在尝试使用条件语句通过搜索 React 将呈现的容器的 ID 来呈现组件。我不能 100% 确定 React 的最佳实践是什么。它看起来像这样。

if(document.getElementById('a-compenent-in-page-1')) {
    React.render(
        <AnimalBox url="/api/birds" />,
        document.getElementById('a-compenent-in-page-1')
    );
}

if(document.getElementById('a-compenent-in-page-2')) {
    React.render(
        <AnimalBox url="/api/cats" />,
        document.getElementById('a-compenent-in-page-2')
    );
}

if(document.getElementById('a-compenent-in-page-3')) {
    React.render(
        <AnimalSearchBox url="/api/search/:term" />,
        document.getElementById('a-compenent-in-page-3')
    );
}

我仍在阅读文档，但还没有找到我需要的多页应用程序。

提前致谢。

Answer 1

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

该应用程序不是一个完整的 React 应用程序，我将 React 用于动态 Stuff，例如 CommentBox，它是 autark。并且可以包含在任何带有特殊参数的点..

但是，我所有的子应用程序都被加载并包含在一个文件 all.js 中，因此它可以被浏览器跨页面缓存。

当我需要在 SSR 模板中包含一个应用程序时，我只需要包含一个带有“__react-root”类和一个特殊 ID 的 DIV(要呈现的 React 应用程序的名称)

逻辑真的很简单:

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" class="__react-root"></div>

<script src="/all.js"></script>

编辑

由于 webpack 完美支持代码拆分和延迟加载，我认为包含一个示例是有意义的，您不需要将所有应用程序加载到一个包中，而是将它们拆分并按需加载。

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);
    });
  }
}