Question

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

我可以通过在res.locals或cookies中设置简单变量来发送简单变量，但对于较大的对象，我该怎么做？

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

代码简介：

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

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

ejs在快速配置中设置为视图引擎，它会将索引文件返回给浏览器，并添加webpack捆绑的反应代码。

Answer 1

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

但是，如果您仍然想在加载时向反应页面提供一些数据，则可以像下面这样使用脚本标签和JSON传递数据：

在您的模板中：

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

（这使用js（JSON.stringify），j（JavaScript字符串）和s（请勿逃脱HTML）builtin dust filters）来呈现您的数据。例如。将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>

通过此模板，您应该能够在React代码中访问window._myInitialState，例如像这样将其加载到您的根组件中：

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

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

1 个答案: