我有一个提供给客户端的 EJS View :
index.ejs
<!DOCTYPE html>
<html>
<head>
<title>Example app</title>
</head>
<body>
<div id="reactApp">
<%- reactContent %>
</div>
</body>
<script src="__res__/client/main.bundle.js" />
</html>
main.bundle.js
是我使用 browserify 创建的包:
gulpfile.js(部分)
function bundle(filename) {
var bundler = browserify('./app/client/' + filename + '.js');
bundler.transform(babelify);
bundler.transform(reactify);
return bundler.bundle()
.pipe(source(filename + '.bundle.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('./dist/client'));
}
最终向客户端提供此代码:
main.js(捆绑到 main.bundle.js)
import React from 'react';
import {Login} from './auth/login.react';
React.render(React.createElement(Login), document.getElementById('reactApp'));
alert('hi');
但是,即使浏览器请求并接收 main.bundle.js
脚本,客户端也不会运行 alert('hi');
行,这会导致让我相信 React.render
行也不起作用。我可以确认Javascript已启用,并且我的浏览器是最新版本的Chrome。我的 react 组件(Login
)如下:
登录.react.js
import React from 'react';
export class Login extends React.Component
{
handleClick() {
alert('Hello!');
}
render() {
console.log('rendered');
return (
<button onClick={this.handleClick}>This is a React component</button>
);
}
}
所以,非常简单。但是,您在代码中看到的任何警报都不会运行。 console.log('rendered');
行永远不会在服务器上运行,但是当我检查页面的源代码时,我得到:
我的页面的 HTML 输出
<!DOCTYPE html>
<html>
<head>
<title>Example app</title>
</head>
<body>
<div id="reactApp">
<button data-reactid=".2fqdv331erk" data-react-checksum="436409093">Lel fuck u</button>
</div>
</body>
<script src="__res__/client/main.bundle.js" />
</html>
这意味着服务器正确渲染了我的 React 组件,但为什么客户端脚本不起作用? handleClick
函数永远不会运行,我的 console.log
行永远不会运行,alert
行也不会运行。怎么了? react ID和校验和渲染正确,它不应该工作吗?难道客户端的 React 代码不应该足够智能来找到组件并正确运行吗?
最佳答案
在您的index.ejs中,向脚本标记添加结束元素应该可以解决问题:<script src="__res__/client/main.bundle.js"></script>
另外,在我的测试中,加载页面时,我在 login.react.js 中遇到错误,直到我将 default 添加到导出行: export default class Login extends React.Component
。不确定您是否需要这样做。
关于javascript - React 组件在服务器端渲染,但客户端不接管,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30676838/