如何通过道具服务器端反应

Question

I am using node js to render my react component...

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;

I am trying to pass a prop, exists: false , to the component.

But in my actual component when I try to console.log ...

render(){

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

I get undefined rather than true .

How can I fix this? Is this because the browser is re-rendering the page?

Answer 1

The reason is on your client-side, React will render your App component one more time. This time, React will re-render which components are different from server-rendered components. It will refresh your props.exists to undefined because you don't pass anything to App component in your client-side code. There are some techniques to solve it. One way is that in your client-side code, you request exists from the server and pass it to your App component before rendering your application.

Answer 2

I created a very simple app based on your code and am able to see the exists prop set correctly in the render method. Given that this self-contained version works, I wonder if the issue lies somehow within the code of ../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);