React 在移动设备上隐藏侧边栏并在大屏幕上显示答案

【问题标题】：React hide sidebar on mobile and show on big screenReact 在移动设备上隐藏侧边栏并在大屏幕上显示
【发布时间】：2021-03-30 09:32:26
【问题描述】：

我从 MaterialUI 获得了一个Sidebar，我希望它隐藏在移动屏幕上，但是如果你点击菜单图标，它应该是可见的，如果你点击菜单，它应该在大屏幕上默认可见图标它应该关闭。我想为此使用“react-responsive”库，但我不明白如何使用它。

Sidebar.js

// ...imports and styles..


export const SideBar = ({ open }) => {
  const history = useHistory();

  return (
    <StyledSideBar variant="permanent" open={open}>
      <ModuleButton onClick={() => history.push('/dashboard')}>
        <Tooltip title="Dashdoard" placement="right" arrow >
          <FontAwesomeIcon icon={faTachometerAltFast} />
        </Tooltip >
      </ModuleButton>
      <ModuleButton onClick={() => history.push('/chat')}>
        <Tooltip title="Chat" placement="right" arrow>
          <FontAwesomeIcon icon={faCommentsAlt} />
        </Tooltip>
      </ModuleButton>
      <ModuleButton onClick={() => history.push('/calendar')}>
        <Tooltip title="Calendar" placement="right" arrow>
          <FontAwesomeIcon icon={faCalendarAlt} />
        </Tooltip>
      </ModuleButton>
    </StyledSideBar>
  );
}

export default SideBar;

MainPage.js

...imports and styles...

export const MainPage = () => {
  const dispatch = useDispatch();
  const onLogout = () => dispatch(logout());
  const [showSidebar, setShowSidebar] = useState(false);

  const onToggleSidebar = () => {
    setShowSidebar(!showSidebar);
  };

  const isDesktopOrLaptop = useMediaQuery({
    query: '(min-device-width: 1224px)'
  })

  const isTabletOrMobileDevice = useMediaQuery({
    query: '(max-device-width: 1224px)'
  })

  return (
    <>
      <MainHeader onLogout={onLogout} onToggleSidebar={onToggleSidebar} />
      {isDesktopOrLaptop &&
        <SideBar open={showSidebar}  />
      }
      {isTabletOrMobileDevice &&
        <SmSideBar open={showSidebar} />
      }
      <Container>
        <BrowserRouter>
          <Route path="*" exact component={MainContent} />
        </BrowserRouter>
      </Container>
    </>
  );
}

export default authGuardFactory(Redirect)(emailGuardFactory(Redirect)(MainPage));

SmSideBar.js

...import and styles...

export const SmSideBar = ({ open }) => {
  const history = useHistory();

  return (
    <StyledSideBar variant="persistent" open={open} >
      <ModuleButton onClick={() => history.push('/dashboard')}>
        <Tooltip title="Dashdoard" placement="right" arrow >
          <FontAwesomeIcon icon={faTachometerAltFast} />
        </Tooltip >
      </ModuleButton>
      <ModuleButton onClick={() => history.push('/chat')}>
        <Tooltip title="Chat" placement="right" arrow>
          <FontAwesomeIcon icon={faCommentsAlt} />
        </Tooltip>
      </ModuleButton>
      <ModuleButton onClick={() => history.push('/calendar')}>
        <Tooltip title="Calendar" placement="right" arrow>
          <FontAwesomeIcon icon={faCalendarAlt} />
        </Tooltip>
      </ModuleButton>
    </StyledSideBar>
  );
}

export default SmSideBar;

我尝试为平板电脑和移动设备添加另一个侧边栏，但它不起作用。两者之间的唯一区别是变体。

【问题讨论】：

这能回答你的问题吗？ React JS: Collapsible sidebar
并非如此。我需要为此使用 react-responsive 而不是这样的功能
如果你使用 MaterialUI，你会不会只使用他们的抽屉组件 - material-ui.com/components/drawers/#drawer

标签： javascript reactjs

【解决方案1】：

我通过使用响应式库和 js 断点解决了方法问题。

MainPage.js

export const MainPage = ( { match }) => {
  const dispatch = useDispatch();
  const onLogout = () => dispatch(logout());

  const onSizeChange = (matches) => {
    setShowSidebar(matches);
  }
  const isDesktopOrLaptop = useMediaQuery(breakpoints.MAndUp, undefined, onSizeChange)

  const [showSidebar, setShowSidebar] = useState(isDesktopOrLaptop);
  const onToggleSidebar = () => {
    setShowSidebar(!showSidebar);
  };

现在一切正常:)

【讨论】：