Question

我正在尝试使用react-router进行服务器端渲染并且不会出现问题。在react-router的<Handler />内没有点击处理程序，但componentDidMount等生命周期事件会发生。

服务器接收请求，通过react-router运行它并吐出HTML：

routes.js

var routes = (
    <Route handler={App}>
        <Route name='page' handler={Page} path='/page' />
        <Route name='other' handler={Other} path='/other' />
    </Route>
);

server.js

var App = React.createClass({
    render: function () {
        return (
            <div>
                <RouteHandler />
            </div>
        )
    }
});

index.jade

extends layout
block content
  div#app!= markup
  div#test!= test

您可以在此处看到有2个React个组件; content（来自react-router的结果视图）和test（带onClick的简单按钮）

在客户端上加载HTML后，我的client.js脚本会运行，使React能够检查并绑定到组件：

function run(){
    Router.run(routes, Router.HistoryLocation, function (Handler, state) {
        React.render(<Handler />, document.getElementById('app'));
        React.render(<Test />, document.getElementById('test'));
    });
}
run();

问题是onClick处理程序的无针对<Handler />内的任何组件运行，包括react-router组件<Link />。但是<Test /> 确实完全没法。

以下是其中一个页面的标记<Handler />：

var Page = React.createClass({
    componentDidMount:function(){
      window.setTimeout(function(){
          //The runs fine
          console.log('component has connect properly');
      },500);
    },
    render: function () {
        return (
            <div>
                <h1 onClick={this.test}>Page</h1>
                <Link to='other' >Other</Link>
                <button onClick={this.alertIt}>Alert</button>
            </div>
        )
    },
    test:function(){
        console.log('testing');
    },
    alertIt: function () {        
        alert('Page');
    }
});

这是工作<Test />组件：

var Test = React.createClass({
    render: function () {
        return (
            <div>
                <button onClick={this.test}>Test</button>
            </div>
        )
    },
    test:function(){
        alert('testing');
    }
});

更新1

即使我删除服务器端呈现并在客户端上呈现<Handler />，问题仍然存在。

更新2

上面的页面示例是在父组件中呈现：

var App = React.createClass({
    render: function () {
        return (
            <div>
                <RouteHandler />
            </div>
        )
    }
});

更新3

我使用Browserify复制了此没有，将React和react-router作为全局对象，它完全正常...

解决方案A

将browserify-shim添加到我的构建过程并将其设置为使用React而react-router代替window，而不是node_modules。这不是最干净的解决方案，但仍然很适合同构的东西。我仍然想知道为什么使用React中的node_modules会导致此问题。

browserify-shim config：

"browserify": {
    "transform":[
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "React": "global:React",
    "react-router": "global:ReactRouter"
  }

更新4

经过一些游戏之后，它似乎只有react-router与Browserify没有良好的关系。简单React和Browserify工作正常。

react-router onClick没有开火

0 个答案: