💡
質問やフィードバックがありましたら、フォームからお願いします
目次
本文は台湾華語で、ChatGPT で翻訳している記事なので、不確かな部分や間違いがあるかもしれません。ご了承ください
react-transition-group v1 から v4 へのアップグレードに関して、重要なポイントはいくつかあります：
- アップグレード後、
CSSTransitionGroupコンポーネントが削除されました。 leaveがexitに変更されました。transitionNameがclassNamesに変更されました。transitionEnterTimeoutなどがtimeoutオブジェクトに変更されました。transition{Appear, Enter, Leave}が appear, enter, exit に変更されました。
もしコンポーネント内で以下のメソッドを使用している場合は、少し手間がかかりますので、自分で取り除く必要があります：
componentWillAppearcomponentDidAppearcomponentWillEntercomponentDidEntercomponentWillLeavecomponentDidLeave
特に特別な 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これでスムーズに移行できるでしょう。ただし、メンテナンスのしやすさを考えると、徐々に取り除くことをお勧めします。
この記事が役に立ったと思ったら、下のリンクからコーヒーを奢ってくれると嬉しいです ☕ 私の普通の一日が輝かしいものになります ✨
☕Buy me a coffee