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

Question

我正在尝试使用 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;

如有任何帮助，我们将不胜感激！

Answer 1

子组件生命周期方法已在当前 react-transition-group 中删除，您可以使用 onEnter 和 onExit 方法来实现 Events 组件中的 Events =16=]

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

我也研究过你的 codesandbox 及其工作原理。有关详细信息，请查看 documentation.

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

React TransitionGroup lifecycle methods not being called when component is loaded

reactjs

gsap

react-transition-group