使用函數引出組件時，反應過渡組不起作用

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> 
    ); 
    } 
} 

它開始工作。