0

我一直在阅读有关 React 过渡组的信息。95% 的材料都在谈论 CSSTransitionGroup。我的理解是 CSSTransitionGroup 只是建立在 TransitionGroup 之上，它只是提供了对应于各种动画事件的回调方法。

所以我将我的组件包装在一个 TransitionGroup 元素中，并给它一个动画事件，但它永远不会被触发。 

import React, { Component } from "react";

import { TransitionGroup, Transition } from "react-transition-group";



class Test extends Component {


    componentWillAppear(cb) {
        console.log('componentWillAppear')
        cb()
    }

    render() {
        return <div> test </div>
    }
}

class App extends Component {
    render() {
        return (
        <TransitionGroup>
         <Test />
         </TransitionGroup>
         )
    }
}

export default App;
4

1 回答 1

2

您可以使用Transition或CSSTransition不使用TransitionGroup，但如果没有TransitionGroup其他任何一个，您将无法使用。

来自 react-transition-group文档：

<TransitionGroup>组件管理列表中的<Transition>一组组件。与<Transition>组件一样，<TransitionGroup>, 是一个状态机，用于随着时间的推移管理组件的安装和卸载。

...当项目被删除或添加到 TodoList 时， in 道具由<TransitionGroup>.

尝试将您的测试组件的渲染更改为如下内容：

render() {
    return (
        <Transition timeout={150}>
            {(status) => (
                <div className={`fade fade-${status}`}>
                    test
                <div>
            )}
        </Transition>
    )
}
于 2017-11-13T17:04:44.677 回答