如何在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/