reactjs - 过渡组件的 HOC

Question

我尝试在 TransitionGroup 中为我的 Transitions 编写 HOC。如果没有 HOC，它看起来像这样：

...
<TransitionGroup>
          {this.state.show &&
            [1, 2, 3].map(item => (
              <Transition
                key={item}
                timeout={1000}
                addEndListener={this.endHandler(item)}
              >
                <Div />
              </Transition>
            ))}
        </TransitionGroup>  
...

你可以在这里看到整个代码

我试图将动画分离到 AnimationContainer 组件：

动画容器.js

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

...

class AnimationContainer extends React.Component {
  endHandler = item => (n, done) => {
    // some animation functions here
  };

  render() {
    const { item, children } = this.props;
    return (
      <Transition timeout={1000} addEndListener={this.endHandler(item)}>
        {children}
      </Transition>
    );
  }
}

export default AnimationContainer;

但是当我尝试用 AnimationContainer 替换 Transition 时，它不起作用。它有什么问题？