💡
如果想問問題或單純回饋的話可以填寫表單唷
目錄
react-transition-group 從 v1 升級到 v4 比較重要的有幾點：
- 升級後
CSSTransitionGroup元件被移除了 leave變成exittransitionName變成classNamestransitionEnterTimeout之類的變成timeout物件transition{Appear, Enter, Leave}變成 appear, enter, exit
如果在元件中有用到下列方法的就比較麻煩一點了，要自己拔掉：
componentWillAppearcomponentDidAppearcomponentWillEntercomponentDidEntercomponentWillLeavecomponentDidLeave
沒有什麼奇怪的 hack 的話，也可以考慮用 jscodeshift 轉移。如果元件已經肥大到沒辦法輕易 migrate 的話，可以建立一個 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這樣就可以無痛轉移了。不過為了方便維護著想，還是要慢慢拔掉啊。
如果覺得這篇文章對你有幫助的話，可以考慮下面的連結請我喝一杯 ☕ 可以讓我平凡的一天變得閃閃發光 ✨
☕Buy me a coffee