如何在React-Express Node App中将对象从服务器发送到客户端组件

Question

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

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

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

代码流简述：

它是一个海妖的应用程序，如果在服务器端，

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

ejs在express config中设置为视图引擎，它将索引文件返回到浏览器，并添加了由webpack捆绑的react代码。

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） 内置的灰尘过滤器 ）来呈现数据。 例如，将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);
  }