在 ExpressJS + Reactjs 中传递数据以查看答案

【问题标题】：Passing data to view in ExpressJS + Reactjs在 ExpressJS + Reactjs 中传递数据以查看
【发布时间】：2014-10-05 00:05:45
【问题描述】：

我有一个应用程序，其中一部分是使用 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>

你觉得怎么样？？谢谢。

【问题讨论】：

标签： javascript node.js express reactjs

【解决方案1】：

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

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

还有用于 react-helper (https://github.com/tswayne/express-react-helper) 的快速中间件，允许您添加可用于所有视图的上下文，方便用户会话数据。

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

然后，您的所有 React 组件都将拥有 user 属性，而无需手动将该逻辑添加到每个控制器操作中。

【讨论】：

【解决方案2】：

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

所以，你正在做<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);

【讨论】：

@user3470929 请创建一个新问题，而不是在评论中提问。