React在手机上隐藏侧边栏，并在大屏幕上显示

Question

我从MaterialUI得到了一个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;

我试着为平板电脑和手机添加另一个边栏，但它不起作用。两者之间唯一的区别是变体。

Answer 1

我通过使用react响应库和js Breakpoints的方法解决了问题。

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);
};

现在一切正常：(