在 state 和媒体查询之间反应响应式导航栏

Question

我有一个侧边栏，它将使用以下媒体查询在 992px 及以下的宽度上消失：

@media only screen and (max-width: 992px) {
  .sideBar {
    display: none;
  }
}

而移动导航图标也通过以下代码出现：

    <nav class="mobileNav">
      <div class="navLink" href="#">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </nav>


@media only screen and (max-width: 992px) {
  .mobileNav {
    display: flex;
  }
}

现在当我点击这个nav时， sidebar应该出现和消失，所以我做了以下 state：

  const [showSidebar, setShowSidebar] = useState(true);

并修改了以下代码：

          {showSidebar ? (
            <div className="sideBar">
              <SidebarComponent />
            </div>
          ) : null}

并添加onClick function 以修改 state：

    <nav class="mobileNav" onClick={() => setState(!state)>
        ...
    </nav>

当用户点击nav元素时，它确实改变了 state，但由于 css 媒体查询， sidebar不会出现：

@media only screen and (max-width: 992px) {
  .sideBar {
    display: none;
  }
}

那么如何让 state 覆盖媒体查询，或者如何以更好的方式解决它？

Answer 1

您的目标应该是使用 CSS 或 JS 作为您的解决方案，而不是同时使用两者。 因此，您可以始终在 DOM 中使用侧边栏，但使用 CSS 将其隐藏/移出屏幕，然后所有控件都在 CSS 中。

或者您可以根据屏幕/窗口宽度在 JS 中隐藏和显示侧边栏/导航，但这需要您创建一个事件侦听器，以便每次用户调整 windows 大小时，您再次检查是否应该隐藏或显示侧边栏/导航.

此外，不要在“.sidebar”上使用您的媒体查询，而是添加一个额外的 class，例如“sidebar--active”或类似的，然后根据需要使用 JS 添加/删除类名，并使用 css 隐藏或显示它。