我正在尝试使用React的低级API动画(即ReactTransitionGroup)与React Router,因此我可以使用requestAnimationFrame而不是CSS来设置转换动画。有谁知道如何在与每个路由相关的组件上调用特殊的生命周期钩子?
我尝试将RouteHandler组件包装在ReactTransitionGroup中,但更改路由时不会触发当前路由组件的“componentWillLeave”事件。
<ReactTransitionGroup component="div">
<RouteHandler key={name}/>
</ReactTransitionGroup>
这是一个说明我的问题的JSFiddle:http://jsfiddle.net/d2mnwqLj/3/
答案 0 :(得分: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>
);
}
});