我很抱歉，这是一项非常简单的任务，这确实是我第一次过渡到反应。
我有一个使用 js/css/html 构建的现有应用程序，我正试图将其转移以做出反应。它有一个全长的水平侧面板，默认情况下是打开的，当窗口缩小超过一个点时，它会折叠成一个汉堡包图标，并在窗口放大时再次展开。使用 css 中的媒体查询很容易完成。
一个完美的例子是https://purecss.io/layouts/side-menu/（注意侧边菜单）这正是当前应用程序所做的。
我正在努力做到这一点作为反应。我可以构建一个可折叠的侧面板（https://reactjsexample.com/react-side-nav-component/）并根据我的需要对其进行修改，但我不知道如何设置它以便它折叠和展开本身。我知道我可以设置它以使用媒体查询，但是我认为可能有一种更有效的方法。
任何使用好的库的建议或示例将不胜感激。
你可以这样做：
const Component = props => {
const [windowWidth, setWindowWidth] = useState(0)
useEffect(() => {
window.addEventListener('resize', updateWindowDimensions)
updateWindowDimensions()
return () => window.removeEventListener('resize', updateWindowDimensions)
}, [])
useEffect(() => {
if (windowWidth < 500) {
closeModal()
return
}
openModal()
}, [windowWidth])
updateWindowDimensions() {
setWindowWidth(window.innerWidth)
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句