javascript - ReactCSSTransitionGroup componentWillLeave 未调用

Question

我正在尝试使用 ReactCssTransition，但不知何故事件未被调用(componentWillLeave)

这是我的组件

import React, { Component } from 'react'
import TransitionGroup from 'react-addons-css-transition-group'

export default class TransitionComponent extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      let {componentKey} = this.props
      <TransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={500}>
        <Item key={"item"+componentKey} />
      </TransitionGroup>
    );
  }
}

和子组件

class Item extends Component {

  componentDidEnter() {
    console.log("component did enter");
  }

  componentWillLeave(callback) {
    console.log("component will leave");
  }

  render() {
    return (
      <div>Item</div>
    )
  }
}

有什么线索吗？谢谢!

Answer 1

由于没有在“componentWillEnter”函数中调用回调，我遇到了类似的问题。引自 React documentation

It will block other animations from occurring until callback is called

class Item extends Component {

    componentWillEnter(callback) {
        console.log("component will enter");
        callback();
    }

    componentDidEnter() {
        console.log("component did enter");
    }

    componentWillLeave(callback) {
        console.log("component will leave");
        callback();
    }

    render() {
        return (
            <div>Item</div>
        )
    }
}