反应 setState 与媒体查询

Question

有什么方法可以 setState({collapse: true}) 仅适用于移动屏幕吗？我如何根据当前 window 大小切换 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;

基本上我希望该列表在移动设备上隐藏，因为有一个按钮可以切换它，这在平板电脑尺寸和以后的尺寸中是隐藏的。

Answer 1

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

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

Answer 2

您有 2 个选择：

第一个选项

切换类名并让您的 CSS 在不同视口上处理 showing/hiding

第二个选项

在你的 isCollapsed

中使用 window.innerWidth

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

768只是一个例子

反应 setState 与媒体查询

React setState with media queries

setstate

media-queries

reactjs

reactstrap