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中的所有子项提供唯一的键。否则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

React TransitionGroup componentWillLeave什么都不做

1 个答案: