ReactCSSTransitionGroup componentWillLeave不被调用 [英] ReactCSSTransitionGroup componentWillLeave not called

问题描述

我试图用ReactCssTransition来玩，但不知何故没有调用该事件（componentWillLeave）

Im trying to play around with ReactCssTransition but somehow the event is not called(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>
    )
  }
}

任何线索？谢谢！

推荐答案

我在componentWillEnter功能中没有调用回调引起类似的问题。反馈引用文档

I had similar issue caused by not calling the callback within the "componentWillEnter" function. Quote from 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>
        )
    }
}

这篇关于ReactCSSTransitionGroup componentWillLeave不被调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！