React.jsでトグル可能なサイドローブレイアウトを作成するには？

Question

レイアウトをjQueryからReact.jsに移植しています。ナビゲーションと

sidenav幅状態をsidenavに適応

コンテンツをリンクするトグルボタンで

• ヘッダ：これは、から成り、非常に一般的なものです。

あなたが達成すると想像することができるように、多くの（css）ものが進んでいます。私は、可能なアプローチについて本当に混乱しています。ここで

は私のものです：

class CoreLayout extends Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     sidenavCollapsed: false 
    } 
    } 

    onSidenavToggle() { 
    const { sidenavCollapsed } = this.state 

    document.body.classList.toggle('collapsed', !sidenavCollapsed) 

    this.setState({ sidenavCollapsed: !sidenavCollapsed }) 
    } 

    render() { 
    const { sidenavCollapsed } = this.state 
    return (
     <div> 
     <Header onSidenavToggle={::this.onSidenavToggle}></Header 
     <Sidenav> 
     <div className="content">content</div> 
     </div> 
    ) 
    } 
} 

私はbody要素に添付クラスに応じて、すべてのスタイリングを行います

.collapsed .header {} 
.collapsed .sidenav {} 
.collapsed .content {} 

は、基本的には220と60

betwen sidenav幅とコンテンツのマージンを切り替えています

so ...

折りたたまれたプロパティを各レイアウト要素に渡し、クラスcollapsedを別々に追加する必要がありますか？私が達成しようとしているのはsimilar to thisです。

正しい方法は何ですか？fade-out-in sidenav items animation？これまではjQueryユーティリティを使用していましたが、window.requestAnimationFrame()を直接使用するかどうかはわかりません。私は成功したReactCSSTransitionGroupを試しました。

Answer 1

ボタンをナビバーに追加するだけで、cssを使用してトランジションを切り替えたりアニメーションしたりできます。

デモ

https://jsfiddle.net/kuLy0g8z/

を参照してください。