リアクトトランジショングループを移行

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

特に特別な hack がない場合、jscodeshift を使って移行を検討するのも良いでしょう。もしコンポーネントが肥大化していて簡単に移行できない場合は、元の 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

これでスムーズに移行できるでしょう。ただし、メンテナンスのしやすさを考えると、徐々に取り除くことをお勧めします。