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

通常,建议公开一个api,以便react接口可以更新数据,例如当用户导航页面时,而不必重新加载整个页面。react特别是在考虑spa的情况下构建的,react的很大一部分致力于管理页面结构的增量更新。

但是,如果您想在加载时向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>

使用模板中的这个,您应该能够访问 window._myInitialState 在react代码中,例如将其加载到根组件中,如下所示:

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