我正在渲染我的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({}));
res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml});
});
module.exports = router;
注意，我正在使用renderToString。现在，在我的玉文件中，组件呈现为...
<!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技能仍然很基础。
解决方案非常简单。在我的玉器文件中，我将其渲染为...
!{reactOutput}
所以我所做的就是将其更改为...
#app != reactOutput
所有的事件处理程序都起作用了
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句