[英]React TransitionGroup lifecycle methods not being called when component is loaded
我試圖為使用gsap進入和退出的列表設置動畫,所以我用<TransitionGroup>
包裹了列表。 我想使用componentWillEnter和componentWillLeave來觸發我的動畫,但是沒有被調用。 我已經檢查了所有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;
任何幫助將非常感激!
子組件生命周期方法已在當前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>
);
}
}
我也曾在您的codeandbox及其工作上進行過工作。 有關詳細信息,請查閱文檔 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.