我正在渲染我的反应组件......
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技能仍然非常基础。
答案 0 :(得分:1)
解决方案非常简单。在我的玉文件中,我将其呈现为......
!{reactOutput}
所以我所做的就是把它改成......
#app != reactOutput
并且所有事件处理程序都工作