传递数据在ExpressJS + Reactjs中查看

我有一个应用程序，部分是用twitterlogin。 成功login后，我通常会将用户数据传递给模板

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中，如何在login后将这些数据传递给组件？

我正在考虑将数据直接放入浏览器，但我对此没有信心。

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

你怎么想？？ 谢谢。

Answer 1

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

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

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

而在客户端：

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

Answer 2

有一个与express（和任何其他视图渲染节点框架）很好地工作的库称为react-helper（ https://github.com/tswayne/react-helper ）。 它几乎可以处理所有需要做的事情，在视图中渲染响应组件，并在任何节点框架中将数据从服务器传递给它们。 您只需为webpack创build一个入口点（js文件）（lib有一个可以为您生成webpackconfiguration的cli），并在您的控制器和视图中添加一行，并在您的页面上呈现您的组件。 将数据传递给您的反应组件非常简单：

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

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