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

请原谅我，因为我是React自己的新手，但我的理解是，当组件挂载/卸载时，您将无法获得componentDidEnter（）和componentWillLeave（）生命周期挂钩。

您在处理的所有内容是componentDidMount（）和componentWillUnmount（）。

所以用这个代替上面部分，你应该看到您的控制台日志：

componentDidMount() { 
    console.log('Component did mount'); 
    } 

    componentWillUnmount() { 
    console.log('Component will unmount'); 
    } 

，如果你想获得所有你需要使用ReactTransitionGroup，而不是生命周期挂钩，我相信，我还没有想通尽管如何实现这一点。

有一个good article on it on Medium虽然作者解释得很好。

在文章中她谈到了用ReactTransitionGroup组件包装她的子组件，并且我相信这就是你正在寻找的东西。基本上围绕你的当前<Item /> ...

Answer 2

我有类似的问题，因为没有调用“componentWillEnter”函数内的回调。引自阵营documentation

这将阻止其他动画的发生，直至回调被称为

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