react-transition-group のマイグレーション

react-transition-group を v1 から v4 にアップグレードする際、重要となるポイントは以下の通りだ：

1. アップグレード後、CSSTransitionGroup コンポーネントが削除された
2. leave が exit になった
3. transitionName が classNames になった
4. transitionEnterTimeout などが timeout オブジェクトになった
5. transition{Appear, Enter, Leave} が appear, enter, exit になった

もしコンポーネント内で以下のメソッドを使っている場合は少し厄介で、自分で取り除く必要がある：

• componentWillAppear
• componentDidAppear
• componentWillEnter
• componentDidEnter
• componentWillLeave
• componentDidLeave

変なハックをしていないなら、jscodeshift を使った移行を検討してもいい。もしコンポーネントがすでに肥大化していて簡単に移行できない場合は、ラッパー（wrapper）を作成して元の props をラップしてしまうといい：

/**
 * NOTE:
 * This is temporary wrapper component for Transition.js,
 * It provides the same API as `CSSTransitionGroup` in v1
 */
import * as React from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

type Props = {
  component?: React.ReactNode;
  transitionName: string;
  transitionEnterTimeout?: number;
  transitionExitTimeout?: number;
  transitionEnter?: boolean;
  transitionExit?: boolean;
  children: React.ReactNode,
};

const CSSTransitionGroup = ({
  transitionEnterTimeout= 0,
  transitionExitTimeout= 0,
  transitionEnter= true,
  transitionExit= true,
  transitionName,
  children,
  component,
}: Props) => {
  const transitionChildrenProps = {
    classNames: transitionName,
    timeout: { enter: transitionEnterTimeout, exit: transitionExitTimeout }
  };

  const transitions = React.Children.map(children, (child: any) => (
    <CSSTransition key={`transition-${child.key}`} {...transitionChildrenProps}>{child}</CSSTransition>
  ));

  return (
    <TransitionGroup
			component={component}
			enter={transitionEnter}
			exit={transitionExit}
 		>
      {transitions}
    </TransitionGroup>
  );
};

export default CSSTransitionGroup

こうすれば無痛で移行できる。ただ、保守性を考えれば、やはり徐々に剥がしていくべきだろう。