migrate react-transition-group
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
沒有什麼奇怪的 hack 的話,也可以考慮用 jscodeshift 轉移。如果元件已經肥大到沒辦法輕易 migrate 的話,可以建立一個 wrapper 把原本的 props 包裝一下:
javascript
/*** 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 (<TransitionGroupcomponent={component}enter={transitionEnter}exit={transitionExit}>{transitions}</TransitionGroup>);};export default CSSTransitionGroup
這樣就可以無痛轉移了。不過為了方便維護著想,還是要慢慢拔掉啊。