HOC для переходного компонента - PullRequest
Новая
       8

HOC для переходного компонента

0 голосов
/ 21 мая 2018

Я пытался написать HOC для моих переходов в TransitionGroup.Без HOC это выглядит так: 

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

Вы можете увидеть весь код здесь

И я попытался выделить анимацию для компонента AnimationContainer:

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;

Но когда я пытаюсь заменить Transition на AnimationContainer, он не работает.Что с ним не так?

...