javascript - 将按钮保留在侧边栏的边缘
问题描述
我正在开发一个反应模板,我想要一个侧边栏导航组件。我正在努力扩大部分。因此,当导航组件展开时,我希望内容缩小并且展开/折叠按钮保持在菜单的边缘。
关闭
打开
我的想法是使用 react-bootstrap 及其 Col 组件,但这不起作用。我的下一个想法是跟踪侧边栏菜单的宽度并相应地调整内容和按钮。对于这个想法,我想我需要将宽度状态拉到我的顶级组件,但这似乎是草图。我试图弄清楚如何在组件扩展和收缩时获得组件的宽度。我的经验很低,这是我第一次参与我自己的 react 项目。
App.js(顶级组件)
import React, { Component } from "react";
import { Route, NavLink, HashRouter } from "react-router-dom";
import Home from "./Home";
import SidebarContainer from "./Sidebar/SidebarContainer";
import Row from "react-bootstrap/Row";
export default class App extends Component {
render() {
return (
<HashRouter>
<div>
<Row>
<div className="header">
<span>Company Name</span>
<span>App Name Goes Here</span>
<span>Hello Username</span>
</div>
</Row>
<Row>
<SidebarContainer/>
<div className="content">
<Route exact path="/" component={Home} />
</div>
</Row>
</div>
</HashRouter>
);
}
}
边栏容器
import React, { Component } from "react";
import ToggleButton from './ToggleButton';
import SidebarMenu from './SidebarMenu';
export default class SidebarContainer extends Component {
constructor(props) {
super(props);
this.state = {
SidebarOpen: false
};
this.toggleSidebar = this.toggleSidebar.bind(this);
}
toggleSidebar(){
this.setState({
SidebarOpen: !this.state.SidebarOpen
});
}
render(){
return (
<div>
<ToggleButton onClick = {this.toggleSidebar} menuVisibility = {this.state.SidebarOpen}/>
<SidebarMenu menuVisibility = {this.state.SidebarOpen}/>
</div>
)
}
}
侧边栏菜单
import React, { Component } from "react";
import "./SidebarMenu.css";
import FeedbackButton from "./FeedbackButton";
export default class SidebarMenu extends Component {
render() {
let visibility = "hide";
if(this.props.menuVisibility){
visibility = "show";
}
return (
<div id="SidebarMenu" className= {visibility}>
<h2><a href="#">Home</a></h2>
<h2><a href="#">About</a></h2>
<h2><a href="#">Contact</a></h2>
<h2><a href="#">Search</a></h2>
<FeedbackButton/>
</div>
)
}
};
按钮
import React, { Component } from "react";
import "./ToggleButton.css"
export default class ToggleButton extends Component {
render() {
let menuStatus = "hidden";
let direction = ">"
if(this.props.menuVisibility){
menuStatus = "open"
direction = "<"
}
return (
<button id="toggleButton" className={menuStatus} onClick={this.props.onClick}> {direction} </button>
)
}
};
解决方案
推荐阅读
- r - 如何为具有不同迭代名称的 CSV 文件编写循环?
- intellij-idea - IntelliJ 中的运行/调试配置中缺少字段和选项卡
- web-services - DataSink 步骤以返回所有子项的每个响应
- java - 如何暂停/延迟,我的代码的特定部分
- python - Python:如何根据一系列条件语句的结果将元素输出到特定列
- mysql - 将 mysql 数据库凭据添加到环境变量会导致操作错误
- javascript - 如何更改 CSS 和 JS 中的 CSS 样式表?
- python - Keras:如何在每批训练时修改 keras 模型的输入
- odbc - 无法使用 ODBC 连接到 Azure SQL Server(该功能不熟悉生成服务器证书的证书颁发机构)
- amazon-web-services - Terraform 中的 AWS VPC CIDR 子网给出错误