使用媒体查询响应 setState答案

【问题标题】：React setState with media queries使用媒体查询响应 setState
【发布时间】：2018-08-11 12:47:05
【问题描述】：

有什么方法可以setState({collapse: true}) 仅用于移动屏幕？如何根据当前窗口大小切换this.state.collapse？

import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom';

import $ from 'jquery';
import { Container, Row, Col, Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
import { css } from 'glamor';
import { ToastContainer } from 'react-toastify';
import toast from '../toast';
import { BarLoader } from 'react-spinners';

//  ----------------   Custom components
import DashboardNavbar from '../DashboardPage/Dashboard/DashboardNavbar/DashboardNavbar';
import Footer from '../Footer/Footer';

import './VideoPage.css';

class VideoPage extends Component {

  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      collapsed: false
    };

    this.toggleLoader = this.toggleLoader.bind(this);
    this.notifySuccess = this.notifySuccess.bind(this);
    this.notifyError = this.notifyError.bind(this);
    this.toggleNavbar = this.toggleNavbar.bind(this);
  }

  notifySuccess(msg) {
    toast.success(msg);
  }

  notifyError(msg) {
    toast.error(msg);
  }

  toggleLoader() {
    this.setState({
      loading: !this.state.loading
    });
  }

  // isAuthenticated() {
  //   const token = localStorage.getItem('authToken');
  //   if (token) {
  //     return true;
  //   }
  // }
  toggleNavbar() {
    this.setState({
      collapsed: !this.state.collapsed
    });
  }
  render() {
    const currentLocationPath = this.props.location.pathname;
    const videoPage = currentLocationPath.includes('/video');
    return (
      <div className="VideoPage d-flex flex-column flex-grow">
        <div className="VideoPageMain d-flex flex-grow">
          <Container fluid>
            <Row>
              <DashboardNavbar videoPage={videoPage} />
            </Row>
            <Row>
              <Col xs="12" sm="3">
                <div className="sidebarMenu">
                  <Navbar dark>
                    <NavbarBrand className="mr-auto">Menu</NavbarBrand>
                    <NavbarToggler onClick={this.toggleNavbar} className="mr-2 d-sm-none" />
                    <Collapse isOpen={!this.state.collapsed} navbar>
                      <Nav navbar>
                        <NavItem>
                          <NavLink href="/components/">Components</NavLink>
                        </NavItem>
                        <NavItem>
                          <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
                        </NavItem>
                      </Nav>
                    </Collapse>
                  </Navbar>
                </div>
              </Col>
              <Col xs="12" sm="9">.col</Col>
            </Row>
          </Container>
        </div>
        <Footer />
      </div>
    )
  }
}

export default VideoPage;

基本上我希望列表隐藏在移动设备上，因为有按钮可以切换它，从平板电脑尺寸及以后隐藏。

【问题讨论】：

标签： reactjs media-queries setstate reactstrap

【解决方案1】：

看起来有一个库：https://github.com/contra/react-responsive

否则，您可以在窗口的 resize 事件中添加一个侦听器，并在构造函数中触发该侦听器以检查大小。

【讨论】：

谢谢。 react-responsive 的“使用子函数渲染”对我有用

【解决方案2】：

你有两个选择：

第一个选项

切换类名并让您的 CSS 处理在不同视口上显示/隐藏

第二个选项

在你的 isCollapsed 中使用 window.innerWidth

<Collapse isOpen={!this.state.collapsed && window.innerWidth < 768} navbar>

768只是一个例子

【讨论】：