如何通过 prop 服务器端做出反应

Question

我正在使用 Node js 渲染我的 React 组件......

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;

我正在尝试将 prop 传递exists: false给组件。

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

render(){

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

我得到undefined而不是true。

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

Answer 1

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