时间戳

首页 > 解决方案 > 如何在 react-express 节点应用程序中将对象从服务器发送到客户端组件

javascript - 如何在 react-express 节点应用程序中将对象从服务器发送到客户端组件

问题描述

如何将 JS 对象从Express后端发送到客户端React组件？

res.locals我可以通过将它们设置为or来发送简单的变量cookies，但是对于较大的对象，我该怎么做？

不支持 API，因为它会导致页面加载，然后请求使用户在屏幕上等待。我的详细信息在服务器启动后立即可用。

代码流程简述：

它是一个海妖应用程序，如果我这样做，在服务器端，

router.get('/', (req, res) => res.render('index')),

ejswebpack在 express 配置中设置为视图引擎，它将通过添加捆绑的反应代码将索引文件返回给浏览器。

标签： javascriptnode.jsreactjsexpress

解决方案

一般来说，建议公开一个 API，以便 React 接口可以更新数据，例如当用户导航页面时，无需重新加载整个页面。React 在构建时特别考虑了 SPA，并且 React 的很大一部分致力于管理对页面结构的增量更新。

但是，如果您想在加载时向您的反应页面提供一些数据，您可以使用脚本标签和 JSON 传递它，如下所示：

在您的模板中：

<script>
  window._myInitialState = JSON.parse("{initialState|js|j|s}");
<script>

（这是使用js（JSON.stringify）、j（JavaScript 字符串）和s（不要转义 HTML）内置灰尘过滤器）来呈现您的数据。例如res.locals.initialState设置为

    {
      users: [
        { name: "Test" },
        { name: "Toast" },
        { name: "Foo" },
        { name: "Bar" },
      ]
    }

它应该 JSON 将其编码为以下脚本：


    <script>
      window._myInitialState = JSON.parse("{\"users\":[{\"name\":\"Test\"},{\"name\":\"Toast\"},{\"name\":\"Foo\"},{\"name\":\"Bar\"}]}");
    <script>

有了这个在你的模板中，你应该能够window._myInitialState在你的 React 代码中访问，例如将它加载到你的根组件中，如下所示：

  componentDidMount() {
    this.setState(window._myInitialState);
  }

推荐阅读