React TransitionGroup componentWillLeave 什么都不做

Question

我想使用 React TransitionGroup 为我的加载屏幕设置动画，到目前为止，我用 componentWillAppear() 替换了 componentDidMount() 生命周期，效果非常好。

所以现在我猜每当我的组件即将被卸载时，componentWillLeave() 就会被调用对吧？不是这样的..

Whosebug 上有一些关于 componentWillLeave 和 TransitionGroup 生命周期的问题，但似乎没有任何问题可以回答我的问题，有些与我认为应该在 0.14 中修补的错误有关。我已经尝试了很多东西并在控制台上记录了很多但没有任何反应。

这是我的 LoadingScreen 组件的一部分：

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import BaseComponent from './BaseComponent.js';

let TweenMax = require('gsap');

export default class LoadingScreen extends React.Component {
    constructor(props){
        super(props);
    }
    componentWillAppear(callback) {
        this._animateIn(callback);
    }
    componentWillLeave(callback) {
        this._animateOut(callback);
    }
    _animateIn(callback) {
        let node = ReactDOM.findDOMNode(this);
        TweenMax.to(node, 0.7, {ease: Power2.easeInOut, opacity: 1, y: -75}).eventCallback('onComplete', callback);     
    }
    _animateOut(callback) {
        console.log('here');
        let node = ReactDOM.findDOMNode(this);
        TweenMax.to(node, 0.5, {opacity: 0, x: -75}).eventCallback('onComplete', callback);
    }

    render() {  
     // Render stuff...
    }

关于您的信息，父组件的渲染函数（它使用 FirstChild 组件以便我可以使用表达式）：

render () {
    return  <TransitionGroup component={FirstChild}>
            {this.state.isLoading ? <LoadingScreen error={this.state.hasError}/> : <VRScene images={this.state.images}/>}
            </TransitionGroup>
    }

我猜它与回调有关，因为 docs 状态：

It will block other animations from occurring until callback is called. It is only called on the initial render of a TransitionGroup.

我递归调用这些吗？我在这里做错了什么吗？或者这是另一个错误？

一些见解会很棒 :)

TIA！

Answer 1

您必须为 TransitionGroup 中的所有 children 提供唯一的 key。否则 React 将无法确定哪些 children 已经进入或离开。

{this.state.isLoading ? 
             <LoadingScreen key="loader" error={this.state.hasError}/> :
             <VRScene key="VRScene" images={this.state.images}/>
}

example with keys -> Works

example without keys -> Does not work

React TransitionGroup componentWillLeave 什么都不做

React TransitionGroup componentWillLeave does nothing

jsx

reactjs

react-jsx