全部：
我是 React 的新手，我想知道如何在 React 中实现 Header Menu + Side Menu 组件布局？
它应该是这样的：
点击橙色标题菜单项，会出现侧边菜单（左侧深灰色部分，没有初始显示的深灰色部分，只有在标题菜单中点击相应项目时才会显示），再次点击相同的项目，它将向左滑动切换。并且内容区域将自动缩放。
关于如何实现这一点的任何帮助将不胜感激，它不必是一个完整的解决方案，例如如何单击和侧边菜单切换滑出或左侧菜单滑出时如何缩放右侧，或类似的东西。
谢谢
如何在 React 中构建响应标题菜单的侧边切换菜单
IT技术
reactjs
2021-05-20 00:29:51
1个回答
这个问题太多了，无法给出完整的答案。所以我只是要给出一个没有代码的简单布局设计。您应该能够使用此设置自己编写代码，因为它应该非常简单。
您需要一个主要组件来呈现页面的页眉、侧边栏和内容。
标题主要组件需要根据标题点击处理打开或关闭状态。所以header item onClick(this.props.onClick)。props.onClick 被传递给 header 组件，主组件需要捕获它并设置一个状态。
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）时，您应该能够调整左侧位置以创建有效的幻灯片（因为我们在 left 属性上添加了 css 过渡。
.sidebar.open {
left: 0;
}
.content.open {
left: 300px;
}