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