IT技术 - 在多页应用中使用 React - 吾爱随笔录

在多页应用中使用 React

IT技术 javascript node.js reactjs

2021-04-26 06:41:29

我一直在玩 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')
    );
}

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

提前致谢。

4个回答

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

该应用程序不是一个完整的 React 应用程序，我使用 React 来处理动态的东西，比如 CommentBox，它是自给自足的。并且可以包含在具有特殊参数的任何点..

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

当我需要在 SSR 模板中包含一个应用程序时，我只需要包含一个带有“__react-root”类的 DIV 和一个特殊的 ID，（要呈现的 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 完美支持代码拆分和 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);
    });
  }
}

您可以在 webpack.config.js 文件中为应用程序提供多个入口点：

var config = {
  entry: {
    home: path.resolve(__dirname, './src/main'),
    page1: path.resolve(__dirname, './src/page1'),
    page2: path.resolve(__dirname, './src/page2'),
    vendors: ['react']
  },
 output: {
    path: path.join(__dirname, 'js'),
    filename: '[name].bundle.js',
    chunkFilename: '[id].chunk.js'
  },
}

那么你可以在你的 src 文件夹中拥有三个不同的 html 文件以及它们各自的 js 文件（例如 page1）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page 1</title>
</head>
<body>
  <div id="app"></div>
  <script src="./vendors.js"></script>
  <script src="./page1.bundle.js"></script>
</body>
</html>

JavaScript 文件：

import React from 'react'
import ReactDom from 'react-dom'
import App from './components/App'
import ComponentA from './components/ReactComponentA'
ReactDom.render(<div>
                  <App title='page1' />
                  <ReactComponentA/>
                 </div>, document.getElementById('app'))

然后可以为每个页面加载不同的 React 组件。

我正在从头开始构建一个应用程序，并且正在学习，但我认为您正在寻找的是React-Router。React-Router 将您的组件映射到特定的 URL。例如：

render((
    <Router>
        <Route path="/" component={App}>
            <Route path="api/animals" component={Animals}>
               <Route path="birds" component={Birds}/>
               <Route path="cats" component={Cats}/>
            </Route>
        </Route>
        <Route path="api/search:term" component={AnimalSearchBox}>
    </Router>
), document.body)

在搜索案例中，'term' 可以作为 AnimalSearchBox 中的一个属性访问：

componentDidMount() {
    // from the path `/api/search/:term`
    const term = this.props.params.term
}

试试看。就我对这个主题和其他相关主题的理解而言，本教程使我处于领先地位。

原答案如下：

我在这里找到了寻找相同答案的方法。看看这篇文章是否对你有所启发。如果您的应用程序与我的应用程序类似，那么它的部分变化很小，并且仅在主体部分有所不同。您可以创建一个小部件，其职责是根据应用程序的状态呈现不同的小部件。使用 Flux 架构，您可以调度一个导航操作来更改您的正文小部件切换的状态，从而仅有效地更新页面的正文。

这就是我现在正在尝试的方法。

您使用的是 CMS 吗？他们往往喜欢更改可能会破坏您的应用程序的 url。

另一种方法是使用React Habitat 之类的东西。

有了它，您可以注册组件，并且它们会自动暴露给 dom。

例子

注册组件：

container.register('AnimalBox', AnimalBox);
container.register('AnimalSearchBox', AnimalSearchBox);

然后它们在您的 dom 中可用，如下所示：

<div data-component="AnimalBox"></div>

<div data-component="AnimalSearchBox"></div>

以上将自动替换为您的react组件。

然后，您也可以自动将属性（或props）传递给您的组件：

<div data-component="AnimalBox" data-prop-size="small"></div>

这将size作为一个props暴露给你的组件。还有其他选项可以传递其他类型，例如 json、数组、整数、浮点数等。

其它你可能感兴趣的问题

上一篇更改左手坐标系的 Slic3r 设置下一篇花瓶模式下奇怪的挤压不足？