ReactCSSTransitionGroup componentWillLeave не называется

Question

Im пытается играть с 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

Пожалуйста, извините меня за то, что я новичок, чтобы отреагировать на себя, но я понимаю, что когда компоненты монтируются/размонтируются, вы не получите перехваты жизненного цикла 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> 
     ) 
    } 
}