React TransitionGroupが状態変更時に子をアンマウントしない

Question

リアクショントランジショングループを使用してサイドバーコンポーネントを構築しています。次のように関連するコードが行く：

function FirstChild(props) { 
    const childrenArray = React.Children.toArray(props.children); 
    return childrenArray[0] || null; 
} 

class Sidebar extends Component { 
    componentWillEnter(cb) { console.log('entering'); cb() } 
    componentWillLeave(cb) { console.log('leaving'); cb() } 

    render() { 
    // return sidebar jsx 
    } 
} 

class Nav extends Component { 
    ... 

    toggleSidebar() { 
    const newState = !this.state.show; 
    this.setState({ show: newState }) 
    } 

    render() { 
    return (
     <TransitionGroup component={FirstChild}> 
     { (this.state.show == true) ? <Sidebar /> : null } 
     </TransitionGroup> 
    ) 
    } 
} 

問題は、私はサイドバーを切り替えるしようとすると、ライフサイクルフックのどれもがトリガされていないことをです。最初のクリックでは、サイドバーがDOMに追加され、componentDidMountは呼び出されますが、componentWillEnterは呼び出されません。もう一度クリックして非表示にすると、state.showは正しくfalseに設定されますが、サイドバーは非表示にならず、今回はライフサイクルフックがトリガーされません。

サイドバーを条件付きでレンダリングするために三項演算子を正しく実行したのか、なぜならTransitionGroupの下に1つの子をレンダリングするだけの理由があるのだろうかと思います（そのためにFirstChild method found hereを使用しました）。

Answer 1

問題はレンダリングロジックにありました。何らかの理由で

{ (this.state.show == true) ? <Sidebar /> : null } 

はComponentWillEnter/ComponentWillLeaveのようなTransitionGroupライフサイクル機能をトリガしないだろうが、

{ this.state.show && <Sidebar } 

に変更することを修正しました。