Reactjs 在加载组件时未调用React TransitionGroup生命周期方法

我试图用gsap设置一个列表的进出动画，所以我用

包装了我的列表。我想使用componentWillEnter和componentWillLeave来触发我的动画，但是没有调用它们。我每样东西都检查了1000次，但还是弄不清楚。。。我应该用

来代替这种动画吗

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”导入React；
从“react transition group”导入{TransitionGroup}；
从“./animations”导入动画；
类事件扩展了React.Component{
组件输入（cb）{
console.log（'entered'）；
const items=document.getElementsByClassName（“items”）；
animations.animateIn（项目，cb）；
}
组件将离开（cb）{
console.log（'exited'）；
const items=document.getElementsByClassName（“items”）；
动画输出（项目，cb）；
}
render（）{
const event=this.props.event；
返回(

{event.title}

);
}
}
类Main扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
事件：[]
};
}
componentDidMount（）{
返回取回（“https://pickup-btown.herokuapp.com/api/event/biking", 
{
方法：“获取”，
标题：{
“内容类型”：“应用程序/json”
},
模式：“cors”
})
。然后（响应=>{
返回response.json（）；
})
。然后（事件=>{
this.setState（{events:events.docs}）；
})
.catch（err=>console.log（err））；
}
卸载（e）{
e、 预防默认值（）；
this.setState（{events:[]}）；
}
render（）{
const events=this.state.events；
返回(
返回
{events.length(
events.map（event=>{
返回；
})
) : (
)}
);
}
}
导出默认主；

---

任何帮助都将不胜感激

子组件生命周期方法已在当前

react transition group

中删除，您可以使用

oneter

和

onExit

方法来实现

事件中的类似操作

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>
    );
  }
}

类事件扩展React.Component{
render（）{
const event=this.props.event；
返回(
console.log（“输入”，el）}
onEnter={el=>console.log（“enter”，el）}
onExit={el=>console.log（“exit”，el）}
in={true}
>

{event.title}

);
}
}

我也参与了你的代码沙盒和它的工作。有关详细信息，请浏览。
在调用
component的位置将在
事件
组件中输入
和
component将离开
？感谢您的回复，但我认为componentWillMount和componentWillUnmount在
包装中的工作方式不一样。它需要componentWillLeave发出回调信号以删除该组件。它应该可以与componentWillEnter和componentWillLeave一起工作，对吗？是的，你是对的。我想问题可能在于你的回电！请在
animateIn
method中检查您的回调..是的，我本来就有您刚才建议的。我也试过了，但是运气不好。我的console.log不起作用，所以组件的包装方式一定有问题，但我已经尝试了我能想到的每一种变体。。。下面是指向沙箱的链接（如果有帮助的话）：在当前版本中已删除子生命周期方法。因此，您可以尝试使用
oneter
和
onExit
。我已经更新了答案，请看一下！哇，太谢谢你了。这正是我需要看到的，我不知道为什么我不能意识到这一点。你是炸弹