Javascript 反应器中的侧板塌陷和膨胀

很抱歉，这是一项非常简单的任务，这是我第一次过渡到反应

我有一个用js/css/html构建的现有应用程序，我正试图转换它来做出反应。它有一个全长水平侧面板，默认情况下打开，当窗口缩小到超过某个点时，它会用一个汉堡包图标折叠，当窗口的大小变大时，它会再次展开。在css中相当容易地完成媒体查询

一个完美的例子是（注意侧菜单），这正是当前应用程序所做的

我正在努力做这件事。我可以构建一个可折叠的侧板（）并根据我的需要对其进行moffify，但我不知道如何设置它，使其自行折叠和扩展。我知道我可以将其设置为使用媒体查询，但我认为可能有一种更有效的方法

---

如果您有任何关于使用优秀库的建议或示例，我们将不胜感激。

您可以这样做：

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

const Component=props=>{
常量[windowWidth，setWindowWidth]=useState（0）
useffect（（）=>{
window.addEventListener（'resize'，updateWidowDimensions）
updateWindowDimensions（）
return（）=>window.removeEventListener（'resize'，updateWindImmensions）
}, [])
useffect（（）=>{
如果（窗宽<500）{
closeModal（）
返回
}
openModal（）
}，[windowWidth]）
updateWindowDimensions（）{
setWindowWidth（window.innerWidth）
}
}

为什么不进行媒体查询？我想这是做这项工作的工具。谢谢你的建议，我最终使用了媒体查询。对于遇到类似问题的人，我使用了媒体查询和属性（isActive）。当媒体查询启动或单击汉堡按钮时，它会将isActive属性更改为false，尽管css会使侧面板可见或不可见。汉堡按钮通过on v-on:click方法进行设置