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

react-transition-groupをv1からv4にアップグレードする際の重要な変更点は次の通りです：

CSSTransitionGroupコンポーネントが削除されました。
leaveがexitに変更されました。
transitionNameがclassNamesに変更されました。
transitionEnterTimeoutなどがtimeoutオブジェクトに変更されました。
transition{Appear, Enter, Leave}がappear、enter、exitに変更されました。

以下のメソッドがコンポーネント内で使用されている場合は、少し手間がかかります。自分で削除する必要があります：

componentWillAppear
componentDidAppear
componentWillEnter
componentDidEnter
componentWillLeave
componentDidLeave

特に奇妙なハックがない場合は、jscodeshiftを使用して変換することも考慮できます。コンポーネントが移行するのが困難なほど大きくなっている場合は、次のように元のプロパティをラップするラッパーコンポーネントを作成することもできます：

/**
 * 注意：
 * これはTransition.jsの一時的なラッパーコンポーネントです。
 * v1の`CSSTransitionGroup`と同じAPIを提供します。
 */
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

これで無痛に移行できます。ただし、メンテナンスのために少しずつ削除することをお勧めします。