React JS 获取使用渲染 API 发送的 Express JS 数据

Question

有没有办法在 React 组件中检索使用 Express JS render() API 发送的数据？ express 数据正在发送过来，但我唯一能捕捉到它的级别是在 pug 模板中，但我想在 React 组件中传输或捕捉它，以便我可以从组件内的数据库中检索更多数据。 主要问题是我要发送的数据来自passport，在检查用户是否正在通过身份验证之后。 这是特快路线

response.render(path.resolve('views', 'account.pug'), {user: request.user});

这是pug模板的一部分

body
        #navbar
        #account

我在其中渲染这个组件

class Account extends React.Component
{
    constructor(props)
    {
        super(props);
    }

    componentWillMount()
    {
        console.log(this.props);
    }

    render()
    {
        return(
            <div class='account'>

            </div>
        );
    }
}

我想知道是否有一种优雅的方法可以做到这一点，无需 cookie 操作或其他解决方法。 如果不是，您认为将数据从后端发送到 React 组件的最佳方式是什么？

Answer 1

您需要将数据带入 HTTP 响应，这基本上意味着以某种方式的标头、cookie 或正文。从技术上讲，身体可能是最简单的。在这种情况下，类似于 #account 元素上的数据属性，它包含所有必要的信息，然后在您初始化反应组件时被读取。如果您使用像 redux 这样的状态容器，您可能希望将用户数据添加到您可能已经传输的初始状态。

只是来回重申评论的结果。在这种特定情况下，甚至可能不需要向客户端提供数据，因为它是有关登录用户的数据，应该在服务器端会话中。因此，创建一个端点来获取“当前用户”的数据可能足以在前端获取它，而无需专门共享用户 ID。

Answer 2

您应该将数据直接呈现到组件的构造函数中。来自 pug 的 unescaped interpolation 将处理此问题，而无需任何辅助 API 调用回服务器。

class Account extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state.user = !{JSON.stringify(user)};
    }
    ...

我们的应用与 Vue.js 做了一些非常相似的事情，从用户的角度来看，它非常高效和高性能。

注意：我的 reactjs 知识有限，所以this.state.user 可能不是您需要渲染它的确切位置。不过，我相信这是您应该将数据放入服务器上的 React 的地方。