Reactjs在布局中隐藏侧边栏的方式? [英] Reactjs way of hide sidebar in layout?
问题描述
我想知道如何处理这两种布局.
I am wondering how I can handle these 2 layouts.
首先，我有一个CSS网格布局，该布局可用于1024px或更大的分辨率，以及它们是否支持当前的网格标准.
First I have a css grid layout that gets used on resolutions of 1024px or bigger and if they support current grid standard.
具有标题，侧边栏和主要区域的漂亮标准布局.
Pretty standard layout with a header, sidebar and main area.
.container {
display: grid;
grid-template-columns: 0.30fr 0.70fr;
grid-template-rows: auto;
grid-template-areas: "header header" "sidebar main";
}
.header {
grid-area: header;
background-color: yellow;
}
.sidebar {
grid-area: sidebar;
background-color: lightblue;
}
.main {
grid-area: main;
background-color: green;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
header
</div>
<div class="sidebar">
side
</div>
<div class="main">
main
</div>
</div>
</body>
</html>现在，如果浏览器不支持网格或它们低于1024px，则它们将转到移动版式.
Now if the browser does not support grid or they are below 1024px then they go to the mobile layout.
此布局将由flex制作，成为标题和主要区域的布局，其中边栏被隐藏，仅由用户交互显示.
This layout would be made by flex and becomes a layout of header and main area with the sidebar being hidden and only shown by user interaction.
我只是想不出一个令我满意的反应方式.
I just can't figure out a react way of doing this that I am happy with.
我的问题是我可以用媒体选择器隐藏侧面菜单，然后单击汉堡菜单以切换显示，但是我不知道这是否像Reactjs那样做，因为我宁愿不渲染而不是隐藏它.
My problem is that I can hide the side menu with media selectors and then on click of the hamburger menu toggle the display but I don't know if this feels like a reactjs way of doing it as I rather just not render the side bar instead of hiding it.
我还必须要处理一些调整大小的窗口.
I would also have to have something to handle window on resize.
推荐答案
如果您真的只想以reactjs的方式执行此操作，则可以使用生命周期方法(例如 componentWillMount ， componentDidMount)来执行此操作和 componentWillUnmount 以及 resize 事件和文档的宽度.
If you really want to do this only in reactjs way you can do this using life cycle methods like componentWillMount, componentDidMount and componentWillUnmount along with resize event and document's width.
在此示例中，我没有对CSS部分做太多工作，但是您会明白的.
I did not do much work the CSS part in this example, but you will get the idea.
在全页视图中运行此脚本后，请尝试调整窗口大小.
Try resizing the window after running this script in full-page view.
class MyLayout extends React.Component {
constructor() {
super();
this.state = {
mobileView: false,
showSidebar: true
};
this.updateViewState = this.updateViewState.bind(this);
this.toggleSideBar = this.toggleSideBar.bind(this);
}
updateViewState() {
if (!this.state.mobileView && document.documentElement.clientWidth < 1024) {
this.setState({
mobileView: true,
showSidebar: false
});
} else if (document.documentElement.clientWidth > 1024) {
this.setState({
mobileView: false,
showSidebar: true
});
}
}
toggleSideBar() {
this.setState({
showSidebar: !this.state.showSidebar
});
}
componentWillMount() {
this.updateViewState();
}
componentDidMount() {
window.addEventListener("resize", this.updateViewState);
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateViewState);
}
render() {
let containerClass = 'container';
if (this.state.mobileView) containerClass = containerClass + ' mobileview';
return (
<div className = { containerClass }>
<div className="header"> {this.state.mobileView && <button onClick={this.toggleSideBar} />} header
</div>
{
this.state.showSidebar &&
<div className = "sidebar" >
side
</div>
}
<div className="main">
main
</div>
</div>);
}
}
ReactDOM.render(
<MyLayout /> ,
document.getElementById('container')
);.container {
display: grid;
grid-template-columns: 0.30fr 0.70fr;
grid-template-rows: auto;
grid-template-areas: "header header" "sidebar main";
}
.mobileview {
grid-template-columns: 0fr 1fr;
}
.mobileview.sidebar {
float: left;
}
.header {
grid-area: header;
background-color: yellow;
}
.sidebar {
grid-area: sidebar;
background-color: lightblue;
}
.main {
grid-area: main;
background-color: green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>这篇关于Reactjs在布局中隐藏侧边栏的方式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
