React-如何在渲染服务器端时保留javascript

时间:2016-08-28 00:50:31

标签: javascript node.js reactjs pug

我正在渲染我的反应组件......

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({}));
    res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml});
});
module.exports = router;

注意我正在使用renderToString。现在,在我的jade文件中,组件被渲染为......

<!DOCTYPE html>
html(lang="en")
    head

        link(rel="stylesheet", type="text/css", href="style.css")
        link(rel="stylesheet", href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css")
    body
        !{reactOutput}

        script(type="text/javascript", src="../index.js")

这很好,但是没有一个偶数处理程序被调用。我做了一些研究,结果发现使用renderToString并不会在我的react组件中保留javascript。

如何呈现此组件服务器端并仍然保留事件处理程序?

我正在使用webpack,我是否需要更改webpack.config?如果是这样,我怎么能这样做,我的webpack技能仍然非常基础。

1 个答案:

答案 0 :(得分:1)

解决方案非常简单。在我的玉文件中,我将其呈现为......

!{reactOutput}

所以我所做的就是把它改成......

#app != reactOutput

并且所有事件处理程序都工作