2

CSS ではなく requestAnimationFrame を使用してトランジションをアニメーション化できるように、React Router でアニメーション用の React の低レベル API (つまり、ReactTransitionGroup) を使用しようとしています。各ルートに関連付けられたコンポーネントで呼び出される特別なライフサイクル フックを取得する方法を知っている人はいますか?

RouteHandler コンポーネントを ReactTransitionGroup 内にラップしようとしましたが、ルートを変更するときに現在のルートのコンポーネントの「componentWillLeave」イベントが発生しません。

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

これが私の問題を示す JSFiddle です: http://jsfiddle.net/d2mnwqLj/3/

4

1 に答える 1

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>
   );
   }
});
于 2015-01-28T16:59:09.577 に答える