将 React 过渡组与 React 路由器一起使用

Question

我正在尝试将 React 的低级动画 API（即 ReactTransitionGroup）与 React Router 一起使用，这样我就可以使用 requestAnimationFrame 而不是 CSS 来制作过渡动画。有谁知道如何在与每个路由关联的组件上调用特殊的生命周期挂钩？

我尝试将 RouteHandler 组件包装在 ReactTransitionGroup 中，但当前路由组件的“componentWillLeave”事件在更改路由时不会触发。

<ReactTransitionGroup component="div">
   <RouteHandler key={name}/>
</ReactTransitionGroup>

这是一个说明我的问题的 JSFiddle：http://jsfiddle.net/d2mnwqLj/3/

Answer 1

好的，所以我在 github 上找到了答案。这就是诀窍：

var RouteHandler = require('react-router/modules/mixins/RouteHandler');

var Component = React.createClass({
  mixins: [Router.State, RouteHandler],
  render: function() {
    var routeKey = this.getRoutes().reverse()[0].name;
    var routeHandler = this.getRouteHandler({ key: routeKey });
    return (
     <div>
      <ul>
        <li><Link to="view1">View1 link</Link></li>    
        <li><Link to="view2">View2 link</Link></li>    
      </ul>
      <ReactTransitionGroup component="div">
         {routeHandler}
      </ReactTransitionGroup>
     </div>
   );
   }
});