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