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元素上的data属性之类的东西包含所有必要的信息，然后在初始化React组件时将其读取。如果您使用的是状态容器（例如redux），则可能需要将用户数据添加到可能已经传输的初始状态。

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

Answer 2

您应该将数据直接呈现到Component的构造函数中。来自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充满信心。

React JS获取通过渲染API发送的Express JS数据

2 个答案: