react-transition-groupをv1からv4にアップグレードする際の重要な変更点は次の通りです：
CSSTransitionGroupコンポーネントが削除されました。leaveがexitに変更されました。transitionNameがclassNamesに変更されました。transitionEnterTimeoutなどがtimeoutオブジェクトに変更されました。transition{Appear, Enter, Leave}がappear、enter、exitに変更されました。
以下のメソッドがコンポーネント内で使用されている場合は、少し手間がかかります。自分で削除する必要があります：
componentWillAppearcomponentDidAppearcomponentWillEntercomponentDidEntercomponentWillLeavecomponentDidLeave
特に奇妙なハックがない場合は、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これで無痛に移行できます。ただし、メンテナンスのために少しずつ削除することをお勧めします。
