Question

我有一个应用程序，其中一部分是使用twitter登录。成功登录后，我通常会通过

将用户数据传递给模板

app.get('/', function(req, res, next) {
        log("The Home page has the user info: ", req.session.user);
        res.render('pages/home', {
            app: 'home',
            user: req.session.user || '' 
        });
    });

然后您可以根据user数据呈现模板。

但是在React中，我应该如何在登录后将这些数据传递给组件？

我正在考虑直接将数据放入浏览器，但我对此并不自信。

<script type="javascript">
  var user = #{user}
</script>

你怎么看？感谢。

Answer 1

通常，您在脚本标记中将传递给顶级组件的道具发送到客户端。

所以，你正在做<MyApp user={user} />或MyApp({user: user})，你会创建一个这样的脚本标签：

var code = "<script>var __react_preload_data = " 
           + JSON.stringify({user: user}) 
           + ";</script>";

在客户端：

React.renderComponent(MyApp(__react_preload_data), document.body);

Answer 2

有一个名为react-helper（https://github.com/tswayne/react-helper）的快速（以及任何其他视图呈现节点框架）的库。它几乎处理了在视图中呈现反应组件并在任何节点框架中从服务器传递数据所需的所有操作。您只需为webpack创建一个入口点（js文件）（lib有一个可以为您生成webpack配置的cli）并在控制器和视图中添加一行，您的组件将在该页面上呈现。将数据传递到您的react组件非常简单：

const component = reactHelper.renderComponent('MyComponent', {user: 
req.session.user || ''})
res.render('view-to-render', {component})

还有反应辅助工具（https://github.com/tswayne/express-react-helper）的快速中间件，允许您添加可供所有视图使用的上下文，方便用户会话数据。

app.use(function(req, res, next) {
 req.reactHelperContext.user = req.session.user || '';
});

然后，所有反应组件都将具有用户道具，而无需手动将该逻辑添加到每个控制器操作。

将数据传递到ExpressJS + Reactjs中查看

2 个答案: