React 服务器端渲染事件侦听器未附加

Posted 2023-02-22

【中文标题】React 服务器端渲染事件侦听器未附加

【英文标题】：React server-side rendering event listener is not attached with

【发布时间】：2017-08-19 07:18:23

【问题描述】：

在客户端，我在index.js 中有以下路由：

ReactDOM.render(
    <Router history=browserHistory>
        <Route path="/" component=App/>
        <Route path="/login" component=Login/>
    </Rouuter>
)

其中 App 和 Login 是 2 个 React 组件。登录组件在表单上有一个 onSubmit 事件。

export default Login extends React.Component 

constructor() 
    .....
    this.auth = this.auth.bind(this);


auth(e) 
   .....


render() 
    return (
        ....
        <form method="post" onSubmit=this.auth>
        ....
        <input type="submit" value="Log In"/>
        </form>
        ....
    )

在客户端运行应用程序没有任何问题，提交事件已成功触发。客户端脚本绑定到static/js/bundle.js。

现在我想用nodejs和express做服务器端渲染，所以创建了一个服务器，如下所示。

const express = require('express');
const router = express.router();
var app = express()

const login = require('./routes/login')
const index = require('./routes/index')

app.use('/login', login);
app.use('/', index);
.....

index.js 定义如下（跳过导入部分）：

....
const express = require('express');
const router = express.router(); 

router.get('/', (req, res) => 
    const el = React.createElement(App);
    const html = ReactDOMServer.renderToString(el);
    res.render('index',  html, title: 'Portal' );
)

module.exports = router

并且login.js 的定义类似（跳过导入部分）：

....
const express = require('express');
const router = express.router(); 

router.get('/', (req, res) => 
    const el = React.createElement(Login);
    const html = ReactDOMServer.renderToString(el);
    res.render('index',  html, title: 'Portal' );
)

module.exports = router

其中服务端渲染使用hbs作为模板引擎，模板文件为index.html：

.....
<div id="root"> html </div>
<script src="static/js/bundle.js"></script>
....

正在运行的服务器成功加载了索引和登录页面。但是，提交按钮在登录表单上不起作用。换句话说，事件监听器没有附加在客户端。

我做错了什么吗？谢谢。

【参考方案1】：

如果您使用 webpack，请使用此库 https://github.com/gaearon/react-hot-loader，此存储库中将保留指向该依赖项的链接。

原因？ 客户端/服务器端需要一一渲染。

服务器只渲染 HTML，并客户端所有的逻辑 js 代码，然后反应智能检测到有一个反应组件实际被渲染（因为服务器端首先运行）然后用必要的更新，现在你可以交互

【讨论】：

这仅用于开发，不能用于生产

非常感谢您的回答