Reactjs 如何在React中构建侧切换菜单响应标题菜单

全部：

我对React很陌生，我想知道如何在React中实现标题菜单+侧菜单组件布局

应该是这样的：

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

任何关于如何实现这一点的帮助都将不胜感激，它不一定是一个完整的解决方案，比如如何单击并切换侧菜单滑出，或者如何在左侧菜单滑出时缩放右侧，或者诸如此类的东西

---

谢谢

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

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

收割台主组件需要根据收割台单击来处理打开或关闭状态。所以

标题项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';

并在渲染时将其传递给组件

我不确定我是否完全理解。这是问当你点击标题项目时，侧边栏会滑入视图，其中的项目与你点击的标题项目相关吗？@JohnRuddell是的，根据这张图片，根据不同的菜单项目（浅橙色部分），应该有4个不同的侧菜单（深灰色部分），单击将使上一个菜单滑出，相应的侧菜单滑入。确定应用程序的布局是什么？比如页眉是侧边栏的兄弟吗？不，这很重要。它改变了你做这件事的方式。即使用商店或使用本地state@JohnRuddell没关系，你可以决定，任何结构只要能工作都是好的。兄弟姐妹会更好，因为我可以看到你是如何实现组件之间的通信的。我会按照这个想法自己试试看，看能不能做到。@Kuan没问题！我添加了一个fiddle示例，这样您也可以看到它与组件的代码一起运行：）唯一的问题是它使用的是旧语法，因为它是一个不编译ES6语法的fiddle。干杯
.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;
}

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