Javascript 将ReactTransitionGroup与ReactRouter一起使用
我正在尝试使用React的低级API来制作动画(即React TransitionGroup)和React Router,这样我就可以使用requestAnimationFrame而不是CSS来制作过渡动画。有人知道如何在与每个路由关联的组件上调用特殊的生命周期挂钩吗 我已尝试将RouteHandler组件包装在ReactTransitionGroup中,但当前路由组件的“componentWillLeave”事件在更改路由时不会触发Javascript 将ReactTransitionGroup与ReactRouter一起使用,javascript,reactjs,react-router,Javascript,Reactjs,React Router,我正在尝试使用React的低级API来制作动画(即React TransitionGroup)和React Router,这样我就可以使用requestAnimationFrame而不是CSS来制作过渡动画。有人知道如何在与每个路由关联的组件上调用特殊的生命周期挂钩吗 我已尝试将RouteHandler组件包装在ReactTransitionGroup中,但当前路由组件的“componentWillLeave”事件在更改路由时不会触发 <ReactTransitionGroup compo
<ReactTransitionGroup component="div">
<RouteHandler key={name}/>
</ReactTransitionGroup>
这里有一个JSFiddle说明了我的问题:好的,所以我在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>
);
}
});
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});
返回(
- View1链接
- 查看2链接
{routeHandler}
);
}
});
这似乎是一个已知的问题:而且mixin在最新版本中已经消失了。还有其他方法吗?也许可以尝试这里使用的包装方法:否则等待1.0,我想我会等待1.0。我不认为包装将有助于我的用例,因为我需要将道具从父级传播到子级,而将传播代码放在组件之外感觉不太好。