React CSSTransitionGroupがクラスを適用しない

Question

私は何かを逃しているに違いありません。私はどのようにこれを行うためのさまざまな例を見てきましたが、私は私の仕事をすることはできません。私はただ一つの要素を入れ替える必要があります。

私はdiv.popup-msgを正しく表示/非表示にしますが、遷移クラスは適用されず、明らかに要素の入れ替えが行われない状態でブール値を反転するように呼び出しています。

編集：問題が直接render()の代わりにステートレス機能コンポーネントの内部にあった可能性があると考えて、独自のコンポーネントでポップアップを移動しようとしました。まだ運がありません。

togglePopup =() => { 
    let isPopupVisible = this.state.isPopupVisible; 
    isPopupVisible = !isPopupVisible; 
    this.setState({ isPopupVisible }); 
}; 

render() { 
    const Main =() => { 
    let removePopup = this.state.isPopupVisible 
     ? <div key={1} className="popup-msg">List has Been Removed</div> 
     : null; 

    return (
     <div className="main-wrapper"> 
     <CSSTransitionGroup 
      transitionName="popup" 
      transitionEnterTimeout={700} 
      transitionLeaveTimeout={500}> 
      {removePopup} 
     </CSSTransitionGroup> 
     </div> 
    ) 
    }; 

    return (
     <div className="app-wrapper"> 
     <Route exact path="/" component={Main}/> 
     </div> 
) 

} 

SASS：

.popup-enter { 
    transition: opacity 700ms ease-in; 
    opacity: 0.01; 

    &.popup-enter-active { 
    opacity: 1; 
    } 
} 

.popup-leave { 
    transition: opacity 500ms ease-in; 
    opacity: 1; 

    &.popup-leave-active { 
    opacity: 0.01; 
    } 
} 

Answer 1

[OK]を、問題がポップアップが別のコンポーネントの内部であっ有することによるものであったことが分かりました。だから、状態が更新されて親コンポーネントが再レンダリングされ、遷移効果は表示されなかったと思います。親コンポーネントに影響を与えた状態の変更がなかったので、なぜそれがどうして起こるのか分かりません。

ポップアップをコンポーネントの外に移動すると問題が解決しました。