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

【问题标题】：React- How to preserve javascript when rendering server sideReact-渲染服务器端时如何保留javascript
【发布时间】：2016-08-28 00:50:30
【问题描述】：

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

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 不会保留我的反应组件中的 javascript。

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

我正在使用 webpack，我需要更改 webpack.config 吗？如果是这样，我该怎么做呢，我的 webpack 技能还很基础。

【问题讨论】：

标签： javascript node.js reactjs pug

【解决方案1】：

解决方案非常简单。在我的玉文件中，我将其渲染为...

!{reactOutput}

所以我所做的就是将其更改为...

#app != reactOutput

所有的事件处理程序都工作了

【讨论】：

那些玉操作者真的很困惑......我读到“评论行比较 app 与 reactOutput 的否定”......你能解释一下吗，Rocky？
@SparK #app在jade中与创建元素<div id="app"></div>相同。现在，在我上面的代码中，我使用节点 js 将一个变量传递给了 jam，该变量是 reactOutput。 != 只是在<div id=app></div> 中渲染变量而! 只是告诉html 将变量作为纯html 读取，如果我使用= 而不是!= 玉将读取变量用jade语法代替纯html