如何在React.js中創建可切換的sidenav佈局？

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

我做根據附接至主體部件類中的所有樣式：

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

基本上它的切換sidenav寬度和內容餘量介乎220和60

因此...

我是否應該將摺疊屬性傳遞給每個佈局元素並分別添加collapsed類？我想實現的是similar to this。

做什麼是正確的方式fade-out-in sidenav項目動畫？直到現在我正在使用jQuery實用程序，但我不確定是否直接使用window.requestAnimationFrame()是正確的。我試過ReactCSSTransitionGroup沒有成功。

Answer 1

只需在按鈕切換時將一個class添加到導航欄，並使用css爲該切換設置動畫效果。

觀看演示

https://jsfiddle.net/kuLy0g8z/