javascript - 在 React 中折叠和展开侧面板

Question

我很抱歉，这是一个非常简单的任务，这真的是我第一次过渡到 React。

我有一个使用 js/css/html 构建的现有应用程序，我正试图将其转换为 React。它有一个全长的水平侧面板，默认情况下是打开的，当窗口缩小到一定程度时，它会折叠成一个汉堡包图标，并在窗口变大时再次展开。使用 css 中的媒体查询很容易完成。

一个完美的例子是 https://purecss.io/layouts/side-menu/ (注意侧面菜单)这正是当前应用程序所做的。

我正在努力在 react 中做到这一点。我可以构建一个可折叠的侧面板 ( https://reactjsexample.com/react-side-nav-component/ ) 并根据我的需要对其进行修改，但我不知道如何设置它以便它自行折叠和展开。我知道我可以设置它来响应使用媒体查询，但我认为可能有更有效的方法。

任何关于使用好的库的建议或示例将不胜感激。

Answer 1

你可以这样做:

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