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

Question

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

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

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

代码流简介：

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

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

ejs在快速配置中设置为视图引擎，它会将索引文件返回到浏览器，并将 react 代码捆绑在一起，webpack添加到其中。

Answer 1

一般来说，建议公开一个 API，以便 React 接口可以更新数据，例如当用户导航页面时，而无需重新加载整个页面。React 是专门为 SPA 构建的，React 的很大一部分致力于管理页面结构的增量更新。

但是，如果您想在加载时向 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);
}