React Transition Group 从 v1 迁移到 v2 完全指南-优快云博客

React Transition Group 从 v1 迁移到 v2 完全指南

react-transition-group An easy way to perform animations when a React component enters or leaves the DOM 项目地址: https://gitcode.com/gh_mirrors/re/react-transition-group

前言

React Transition Group 是一个用于管理组件进入和离开动画的 React 库。在 v2 版本中，API 进行了重大重构，提供了更灵活和直观的方式来处理动画过渡。本文将详细介绍如何从 v1 迁移到 v2 版本。

主要变更概览

v2 版本的核心变化包括：

移除了 <CSSTransitionGroup> 组件
新增了 <CSSTransition> 组件
重新设计了 <TransitionGroup> 的工作方式
简化了 API 命名，使其更加语义化

以下是关键属性名称的变化对照表：

| v1 属性 | v2 属性 | |---------|---------| | transitionName | classNames | | transitionEnterTimeout | timeout.enter | | transitionLeaveTimeout | timeout.exit | | transitionAppear | appear | | transitionEnter | enter | | transitionLeave | exit |

详细迁移步骤

1. 替换 CSSTransitionGroup

在 v1 中，我们通常这样使用 <CSSTransitionGroup>：

<CSSTransitionGroup
  transitionName="example"
  transitionEnterTimeout={500}
  transitionLeaveTimeout={300}
>
  {items}
</CSSTransitionGroup>

在 v2 中，我们需要使用 <TransitionGroup> 和 <CSSTransition> 的组合：

<TransitionGroup>
  {items.map(item => (
    <CSSTransition
      key={item.id}
      classNames="example"
      timeout={{ enter: 500, exit: 300 }}
    >
      {item}
    </CSSTransition>
  ))}
</TransitionGroup>

2. 更新 CSS 类名

v2 版本将 "leave" 改为了更对称的 "exit"，因此需要更新 CSS：

-.example-leave {
+.example-exit {
   opacity: 1;
 }

-.example-leave.example-leave-active {
+.example-exit.example-exit-active {
   opacity: 0.01;
   transition: opacity 300ms ease-in;
 }

3. 处理动画时间

v1 中使用的是分开的 transitionEnterTimeout 和 transitionLeaveTimeout，在 v2 中合并为一个 timeout 对象：

<CSSTransition
  timeout={{ enter: 500, exit: 300 }}
  // 其他属性...
/>

如果进入和离开时间相同，可以简写为：

<CSSTransition timeout={500} />

高级迁移技巧

创建可复用的过渡组件

为了更好的代码组织和复用，可以创建自定义过渡组件：

const FadeTransition = ({ children, ...props }) => (
  <CSSTransition
    {...props}
    classNames="fade"
    timeout={{ enter: 500, exit: 300 }}
  >
    {children}
  </CSSTransition>
);

然后可以这样使用：

<TransitionGroup>
  {items.map(item => (
    <FadeTransition key={item.id}>
      <div>{item.content}</div>
    </FadeTransition>
  ))}
</TransitionGroup>

生命周期回调

v2 提供了更精细的生命周期回调：

<CSSTransition
  onEnter={node => console.log('开始进入')}
  onEntering={node => console.log('正在进入')}
  onEntered={node => console.log('进入完成')}
  onExit={node => console.log('开始退出')}
  onExiting={node => console.log('正在退出')}
  onExited={node => console.log('退出完成')}
>
  {/* 子元素 */}
</CSSTransition>