[英]React TransitionGroup lifecycle methods not being called when component is loaded
I'm trying to animate a list entering and exiting with gsap, so I wrapped my list with <TransitionGroup>
. 我试图为使用gsap进入和退出的列表设置动画,所以我用
<TransitionGroup>
包裹了列表。 I want to use componentWillEnter and componentWillLeave to trigger my animations, but they aren't being called. 我想使用componentWillEnter和componentWillLeave来触发我的动画,但是没有被调用。 I've checked everything 1000x and can't figure it out... Should I be using
<Transition>
instead for this sort of animation? 我已经检查了所有1000倍并且无法弄清楚...对于这种动画,我应该使用
<Transition>
代替吗?
import React from "react";
import { TransitionGroup } from "react-transition-group";
import animations from './animations';
class Events extends React.Component {
componentWillEnter(cb) {
console.log('entered');
const items = document.getElementsByClassName("items");
animations.animateIn(items, cb);
}
componentWillLeave(cb) {
console.log('exited');
const items = document.getElementsByClassName("items");
animations.animateOut(items, cb);
}
render() {
const event = this.props.event;
return (
<li key={event._id} className="items">
<h1>{event.title}</h1>
</li>
);
}
}
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
events: []
};
}
componentDidMount() {
return fetch("https://pickup-btown.herokuapp.com/api/event/biking",
{
method: "GET",
headers: {
"Content-Type": "application/json"
},
mode: "cors"
})
.then(response => {
return response.json();
})
.then(events => {
this.setState({ events: events.docs });
})
.catch(err => console.log(err));
}
unLoad(e) {
e.preventDefault();
this.setState({ events: [] });
}
render() {
const events = this.state.events;
return (
<section>
<button onClick={this.unLoad.bind(this)}>back</button>
<TransitionGroup component="ul">
{events.length ? (
events.map(event => {
return <Events event={event} key={event._id} />;
})
) : (
<div />
)}
</TransitionGroup>
</section>
);
}
}
export default Main;
Any help would be much appreciated! 任何帮助将非常感激!
Child component life cycle methods has been removed in current react-transition-group
and you can use onEnter
and onExit
methods to achieve like in your Events
component will be 子组件生命周期方法已在当前
react-transition-group
删除,您可以使用onEnter
和onExit
方法来实现,例如在Events
组件中将
class Events extends React.Component {
render() {
const event = this.props.event;
return (
<Transition
timeout={300}
key={event._id}
onEntering={el => console.log("Entering", el)}
onEnter={el => console.log("enter", el)}
onExit={el => console.log("exit", el)}
in={true}
>
<li
key={event._id}
className="items"
>
<h1>{event.title}</h1>
</li>
</Transition>
);
}
}
I have worked on your codesandbox also and its working. 我也曾在您的codeandbox及其工作上进行过工作。 For detailed info please go through documentation .
有关详细信息,请查阅文档 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.