如何通过prop服务器端反应

我正在使用节点js呈现我的反应组件…

var express = require('express'); var router = express.Router(); var React = require('react'); var reactDom = require('react-dom/server'); var App = React.createFactory(require('../components/index')); router.get('/', function(req,res) { var reactHtml = reactDom.renderToString(App({exists: false})); res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml}); }); module.exports = router; 

我试图通过一个道具， exists: false ，组件。

但在我的实际组件，当我尝试console.log …

 render(){ console.log(this.props.exists); return ( <Register /> ); } 

我得到的undefined而不是true 。

我怎样才能解决这个问题？ 这是因为浏览器重新渲染页面？

Answer 1

原因是在你的客户端，React会再次渲染你的App组件。 这一次，React将重新渲染哪些组件与服务器渲染的组件不同。 它会刷新你的props.exists为undefined因为你不会在客户端代码中传递任何东西给App组件。 有一些技巧来解决它。 一种方法是，在您的客户端代码中，您从服务器请求exists ，并在呈现您的应用程序之前将其传递给您的App组件。

Answer 2

我根据你的代码创build了一个非常简单的应用程序，并且能够在render方法中正确地看到exists prop的设置。 鉴于这个独立版本的作品，我不知道这个问题是否在../components/index的代码中。

 'use strict'; var express = require('express'); var router = express.Router(); var React = require('react'); var reactDom = require('react-dom/server'); var App = React.createFactory(class extends React.Component { render () { console.log(this.props); return React.createElement('div'); } }); router.get('/', function(req,res) { var reactHtml = reactDom.renderToString(App({exists: false})); res.send(reactHtml); }); var app = express(); app.use('/', router); app.listen(3000);