reactjs - 如何在 React 中构建侧边切换菜单以响应标题菜单

Question

全部:

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

它应该是这样的:

点击橙色的header menu item，根据side menu(左边的深灰色部分，没有初始显示的深灰色部分，只有在header menu中点击相应的item时才会显示)，点击相同的item再次，它将向左滑动以切换。内容区域将自动缩放。

任何关于如何实现这一点的帮助将不胜感激，它不一定是一个完整的解决方案，比如如何单击和侧边菜单切换滑出或当左侧菜单滑出时如何缩放右侧，或其他就像那样。

谢谢

Answer 1

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

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

页眉主要组件需要根据页眉点击处理打开或关闭状态。所以header item onClick(this.props.onClick) . props.onClick 被传递到 header 组件，主组件需要捕获它并设置状态。

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

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 过渡。

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

Sample Fiddle