如何构建一个侧面切换菜单响应React中的标题菜单

Question

所有

我对React很新，我想知道如何在React中实现Header Menu + Side Menu组件布局？

它应该是这样的：

单击橙色标题菜单项，根据侧面菜单（左侧的深灰色部分，没有显示初始的深灰色部分，仅在标题菜单中单击项目时显示）将显示，单击相同的项目再次，它将向左滑动以切换。内容区域将自动缩放。

任何有关如何实现这一点的帮助都将受到赞赏，它不一定是一个完整的解决方案，有些像是如何点击和侧面菜单切换滑出或左侧菜单滑出时右侧如何缩放，或某事那样的。

由于

Answer 1

在这个问题上太过分了，无法给出完整答案。所以我只是给出一个没有代码的简单布局设计。您应该能够使用此设置自行编写代码，因为它应该非常直接。

您需要一个主要组件来呈现页面的标题，侧边栏和内容。

标题主要组件需要根据标题点击处理打开或关闭状态。所以header item onClick(this.props.onClick)。 props.onClick传递给头部组件，主要组件需要捕获并设置状态。

this.setState({sidebarOpen: !this.state.sidebarOpen});这将总结点击状态的切换效果。现在，当您渲染时，只需根据该状态设置className。

let sidebarClassname = this.state.sidebarOpen ? 'sidebar open' : 'sidebar';
let contentClassname = this.state.sidebarOpen ? 'content open' : 'content';

并将渲染传递给组件。

<Sidebar className={sidebarClassname}

<Content className={contentClassname}

从这里你应该有组件渲染，侧边栏应该是你点击标题时获得一个活动的类。然后你只需要设计风格

布局本身应该相当简单。

CSS

.header { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
}
.sidebar {
  position: absolute;
  top: 60px;
  left: -300px;
  height: 100%;
  width: 300px;
  transition: left .3s ease-in-out;
}
.content {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  height: 100%;
  transition: left .3s ease-in-out;
}

应该非常直接。你需要将侧边栏放在页面外，内容需要填满页面

这里很酷的部分是当你得到一个活跃的类（即open）时，你应该能够调整左侧位置以创建有效的幻灯片（因为我们在左侧属性上添加了css过渡。 / p>

.sidebar.open {
    left: 0;
}
.content.open {
    left: 300px;
}

Sample Fiddle