在ExpressJS + Reactjs中向视图传递数据

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>

你认为怎样？谢谢。

- Hao

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);

- Brigand

---

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

Answer 2

有一个与express（以及任何其他视图渲染节点框架）很好配合的库，叫做react-helper（https://github.com/tswayne/react-helper）。它几乎处理了您需要在任何节点框架中呈现React组件并从服务器向它们传递数据的所有内容。您只需为webpack创建一个入口点（js文件）（该库具有可以为您生成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）的express中间件，允许您添加上下文以供所有视图使用，这对于用户会话数据非常方便。

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

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

- Tyler