TransitionGroup中Transition组件的HOC封装失效问题排查

你的AnimationContainer组件无法正常工作，主要有两个核心问题：

1. TransitionGroup的子元素缺少key属性 #

TransitionGroup依赖子元素的key属性来追踪组件的挂载/卸载状态，从而触发对应的动画逻辑。在你原来的代码中，Transition组件直接作为TransitionGroup的子元素，并且设置了key={item}；但替换为AnimationContainer后，你没有给这个自定义组件添加key属性，导致TransitionGroup无法正确识别每个元素的生命周期，自然不会触发动画。

2. 函数绑定引发的不必要重复渲染（次要但需优化） #

虽然你的endHandler用箭头函数避免了this指向问题，但每次render时调用this.endHandler(item)都会创建一个新的函数实例，可能导致Transition组件不必要的重复渲染。这不是动画失效的主要原因，但会影响组件性能。

修正后的代码 #

第一步：给AnimationContainer添加key属性 #

在使用AnimationContainer时，必须传递key：

<TransitionGroup>
  {this.state.show && [1,2,3].map(item => (
    <AnimationContainer 
      key={item}  // 必须添加这个key，让TransitionGroup能追踪元素
      item={item}
    >
      <Div />
    </AnimationContainer>
  ))}
</TransitionGroup>

第二步：优化AnimationContainer的endHandler #

可以将endHandler改为直接读取props中的item，避免每次render创建新函数：

import React from "react";
import { Transition } from "react-transition-group";

class AnimationContainer extends React.Component {
  endHandler = (node, done) => {
    // 直接通过props获取当前item
    const { item } = this.props;
    // 这里写你的动画逻辑，比如：
    console.log(`处理item ${item}的动画结束`);
    // 不要忘记调用done，告诉Transition动画已完成
    done();
  };

  render() {
    const { children } = this.props;
    return (
      <Transition 
        timeout={1000} 
        addEndListener={this.endHandler}  // 直接传递函数引用
      >
        {children}
      </Transition>
    );
  }
}

export default AnimationContainer;

这样修改后，AnimationContainer就能正常触发TransitionGroup的动画逻辑了。

内容的提问来源于stack exchange，提问作者Mad Max