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

React- How to preserve javascript when rendering server side

本文关键字：保留 javascript 服务器端 React-      更新时间：2023-09-26

我正在渲染我的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。现在，在我的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")

这样呈现很好，但是没有调用任何even处理程序。我做了一些研究，事实证明，使用renderToString不保留javascript在我的反应组件。

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

我正在使用webpack，我需要改变webpack.config吗?如果是的话，我怎么能做到呢，我的webpack技能还是很基础的。

解决方案非常简单。在我的玉器文件中，我把它渲染成…

!{reactOutput}

我所做的就是把它改成。

#app != reactOutput

和所有的事件处理程序工作

相关文章：