React TransitionGroup 组件WillLeave 什么都不做

Question

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

所以现在我猜测每当我的组件即将被卸载时，componentWillLeave() 会在之前被调用，对吧？事实并非如此..

StackOverflow 上有一些关于 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 状态：

它会阻止其他动画的发生，直到回调被调用。它仅在 TransitionGroup 的初始渲染时调用。

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

一些见解会很棒:)

TIA！

Answer 1

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

{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