在服务器端响应组件渲染，但客户端不接管

Question

我有一个提供给客户的 EJS 视图：

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 的最新版本。我的反应组件（Login）如下：

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>
        );
    }
}

所以，很简单。但是，您在代码中看到的警报 none 永远是运行。 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>

这意味着服务器正确呈现了我的反应组件，但为什么客户端脚本不起作用？ handleClick 函数从不运行，我的 console.log 行从不运行，alert 行也从不。怎么了？ reactid 和校验和呈现正确，它不应该工作吗？客户端的 React 代码不应该足够智能以正确找到组件和运行吗？

Answer 1

在您的 index.ejs 中，向您的脚本标记添加结束元素应该可以解决问题：<script src="__res__/client/main.bundle.js"></script>

另外，在我的测试中，我在加载页面时在 login.react.js 中遇到错误，直到我将 default 添加到导出行：export default class Login extends React.Component。不确定您是否需要这样做。

在服务器端响应组件渲染，但客户端不接管

React component rendering on server-side, but client-side does not take over

javascript

ejs

node.js

reactjs

isomorphic-javascript

index.ejs

gulpfile.js（部分）

main.js（捆绑到 main.bundle.js）

login.react.js

HTML 我页面的输出