Question

我正在使用节点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

我根据您的代码创建了一个非常简单的应用，并且能够在render方法中正确设置exists道具。鉴于这个自包含的版本有效，我想知道问题是否在../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);

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

2 个答案: