使用函数引出组件时，反应过渡组不起作用

Question

基于我的应用程序的状态，我使用了一个函数来取出必要的组件。我试图用ReactCSSTransitionGroup为转换添加动画。但它不会工作。在我的主要渲染，我这样做：

<ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}> 
    {this.signupForm()} 
</ReactCSSTransitionGroup> 

然后signupForm函数内部：

signupForm() { 
    const {signupType} = this.state; 

    if (signupType === 'employer') { 
    return (
     <SignupFormEmployerInfo /> 
    ); 
    } else { 
    return (
     <div> 
     <SignupFormEmployeeInfo /> 
     <SignupFormEmployeeSocialLinks /> 
     </div> 
    ); 
    } 
} 

我的CSS：

任何想法如何使这项工作？

.example-enter { 
    opacity: 0.01; 
} 

.example-enter.example-enter-active { 
    opacity: 1; 
    transition: opacity 500ms ease-in; 
} 

.example-leave { 
    opacity: 1; 
} 

.example-leave.example-leave-active { 
    opacity: 0.01; 
    transition: opacity 300ms ease-in; 
} 

Answer 1

刚刚找到答案！ React转换组通过查看组件的key来检测更改。在我的例子中，我没有使用key。所以当我改变它是这样的：

signupForm() { 
    const {signupType} = this.state; 

    if (signupType === 'employer') { 
    return (
     <div key="1"> 
     <SignupFormEmployerInfo /> 
     </div> 
    ); 
    } else { 
    return (
     <div key="2"> 
     <SignupFormEmployeeInfo /> 
     <SignupFormEmployeeSocialLinks /> 
     </div> 
    ); 
    } 
} 

它开始工作。