Question

我将我的布局从jQuery移植到React.js。这是非常常见的一个，包括：

带切换按钮的标题
sidenav with navigation links
宽度适应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之间切换sidenav宽度和内容边距。

因此...

我应该将折叠属性传递给每个布局元素并单独添加类collapsed吗？我想要实现的是similar to this。

执行fade-out-in sidenav项目动画的正确方法是什么？直到现在我使用的是jQuery实用程序，但我不确定直接使用window.requestAnimationFrame()是否正确。我试过ReactCSSTransitionGroup没有成功。

Answer 1

只需在导航栏上添加class按钮切换，然后使用css为过渡设置动画。

参见演示

https://jsfiddle.net/kuLy0g8z/

如何在React.js中创建可切换的sidenav布局？

1 个答案: