转型组件的HOC

时间:2018-05-21 09:32:07

标签: reactjs react-transition-group

我尝试为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>  
...

您可以看到整个代码here

我尝试将动画分离到AnimationContainer Component:

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时,它不起作用。这有什么问题?

0 个答案:

没有答案