如何从 express.js 发送数据以在没有 API 的情况下做出反应？答案

【问题标题】：how to send data from express.js to react without API?如何从 express.js 发送数据以在没有 API 的情况下做出反应？
【发布时间】：2018-12-30 02:55:52
【问题描述】：

我想用react和express创建一个多页面APP。

我很困惑如何在不使用 API 的情况下将 express 发送的数据检索到 react 中。

不知道react能不能检索到express发送的html props中存储的数据？也许这个问题有点奇怪。实际上，我从来没有创建过一个只有快递的网站。我总是通过 API 使用 react 和检索数据并创建一个单页应用程序。

有什么办法吗？

【问题讨论】：

【解决方案1】：

React 和 express 扮演着两个不同的角色。 React 是你的前端。 Express 是后端。这些是逻辑上分离的层。将数据从后端加载到前端的首选方式是通过 API 调用。

【讨论】：

所以如果我只使用 express.js 我还需要做 fetch API 吗？不像 PHP 不需要 API？
当然，你可以用express的PHP方式来做。只需将您喜欢的模板引擎与 express 一起使用。我更喜欢名为handlebars的模板引擎它的语法与纯HTML非常相似。将您最喜欢的模板引擎作为中间件连接到 express。然后你可以像 PHP 一样向用户呈现 HTML。

【解决方案2】：

I wonder if react can retrieve the data stored in html props sent by express?

是的，它可以。我不确定您所说的“html props”是什么意思，但是您可以在将 html 发送回前端时将所需的数据存储为数据属性，然后像这样将其从 DOM 中拉出（https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes )。

根据您打算如何使用它，您可以将这些数据提取出来以供一次性使用或将其推送到您的状态。

【讨论】：

【解决方案3】：

我认为的第一种方法是使用 url 中的参数。

例如，如果您的网站有 http://localhost/ 这样的 url，您将使用 url http://localhost/api/data? 从 express.js 接收数据。

然后在你的express.js，从你的react中得到请求后，你可以使用：

res.redirect(http://localhost/api/${encodeURIComponent(JSON.stringify(data))})

其中res 是响应对象，data 是要发送到数据的数据，假设是一个对象。

在您的react 中，您可以通过以下步骤检索您的数据： - 实现一个组件并将/api/data?设置为该组件的路由； - 在组件中，检索数据为JSON.parse(decodeURIComponent(this.props.match.params.data))

【讨论】：