Reactjs在布局中隐藏侧边栏的方式？答案

【问题标题】：Reactjs way of hide sidebar in layout?Reactjs在布局中隐藏侧边栏的方式？
【发布时间】：2017-11-19 18:44:45
【问题描述】：

我想知道如何处理这两种布局。

首先，我有一个 css 网格布局，可用于 1024 像素或更大的分辨率，如果它们支持当前的网格标准。

非常标准的布局，带有标题、侧边栏和主要区域。

.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>

现在，如果浏览器不支持网格或者它们低于 1024 像素，那么它们会转到移动布局。

这种布局将由 flex 制作，成为标题和主要区域的布局，侧边栏被隐藏，仅由用户交互显示。

我只是想不出一种让我满意的反应方式。

我的问题是我可以使用媒体选择器隐藏侧边菜单，然后单击汉堡菜单切换显示，但我不知道这是否像 reactjs 那样做，因为我宁愿不渲染侧边栏而不是隐藏它。

我还必须有一些东西来处理调整大小的窗口。

【问题讨论】：

使用媒体选择器是完全有效的。如果它只是移动布局更改，它不会违反反应范式:)
好吧，我仍然需要在侧边栏上做一些反应，因为我希望用户能够在他们喜欢的移动布局上基本上随时切换侧边栏。所以我可能不得不通过状态向它添加一个类。就像我说的，我只是喜欢不渲染而不是隐藏的东西。
好吧，是的，决定不渲染它取决于你。根据我的经验，当你隐藏它而不是完全不渲染它时，它可以更容易地应用过渡。此外，使用 JS 来调整大小事件往往比使用媒体选择器更混乱和复杂（特别是如果您在调整大小时触发反应更新）。我的建议是同时使用媒体选择器和一个切换侧边栏的类

标签： javascript html css reactjs

【解决方案1】：

如果您真的只想以 reactjs 方式执行此操作，您可以使用 componentWillMount、componentDidMount 和 componentWillUnmount 等生命周期方法以及 resize 事件和文档宽度来执行此操作。

在这个例子中我没有做太多的 CSS 部分，但你会明白的。

在全页视图中运行此脚本后尝试调整窗口大小。

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>

【讨论】：