React服务器端呈现事件侦听器未附加

Question

在客户端，我在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>
....

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

我做错了什么吗？谢谢。

Answer 1

如果你使用的是webpack，就使用这个库https://github.com/gaearon/react-hot-loader，在这个库中会保留到那个依赖项的链接。

原因是什么？客户端/服务器端需要一个接一个地渲染。

服务器只渲染HTML，并客户端所有的逻辑js代码，然后react智能检测到有一个实际渲染的react组件(因为服务器端先运行)，然后更新必要的组件，现在你可以与之交互了