将HTML/SCSS导航栏重构为React Styled Components遇阻求助

一、全屏通栏布局实现 #

用Styled Components定义导航容器，通过flex布局实现左右分区：

import styled from 'styled-components';

const NavContainer = styled.nav`
  width: 100%;
  padding: 0.5rem 1rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; /* 作为下拉菜单的定位基准 */
`;

const LeftLinks = styled.div`
  display: flex;
  gap: 1.5rem;
  align-items: center;
`;

const RightLinks = styled.div`
  display: flex;
  gap: 1rem;
  align-items: center;
`;

二、Hover下拉菜单实现 #

给带下拉的按钮设置相对定位，下拉菜单默认隐藏，hover时触发显示：

const DropdownButton = styled.button`
  background: none;
  border: none;
  cursor: pointer;
  position: relative;

  &:hover .dropdown-menu {
    display: block;
  }
`;

const DropdownMenu = styled.div`
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 0.5rem 0;
  min-width: 150px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  a {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: #333;

    &:hover {
      background: #f5f5f5;
    }
  }
`;

使用示例：

<DropdownButton>
  更多
  <DropdownMenu className="dropdown-menu">
    <a href="/archive">归档</a>
    <a href="/tags">标签</a>
  </DropdownMenu>
</DropdownButton>

三、响应式移动端适配 #

通过媒体查询控制968px以下的元素显示/隐藏，用状态管理汉堡菜单的展开/收起：

import { useState } from 'react';

const HamburgerButton = styled.button`
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;

  @media (max-width: 968px) {
    display: block;
  }
`;

const MobileNavMenu = styled.div`
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 1rem;
  flex-direction: column;
  gap: 1rem;

  @media (max-width: 968px) {
    display: ${props => props.isOpen ? 'flex' : 'none'};
  }
`;

// 组件内逻辑
function Navbar() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  return (
    <NavContainer>
      <LeftLinks>
        <a href="/">博客首页</a>
        {/* 桌面端专属链接 */}
        <div className="desktop-only">
          <DropdownButton>
            更多
            <DropdownMenu className="dropdown-menu">
              <a href="/archive">归档</a>
              <a href="/tags">标签</a>
            </DropdownMenu>
          </DropdownButton>
          <a href="/about">关于</a>
        </div>
      </LeftLinks>
      <RightLinks>
        {/* 桌面端右侧内容 */}
        <div className="desktop-only">
          <a href="/rss">RSS</a>
        </div>
        <HamburgerButton onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
          ☰
        </HamburgerButton>
      </RightLinks>
      {/* 移动端展开菜单 */}
      <MobileNavMenu isOpen={isMobileMenuOpen}>
        <a href="/about">关于</a>
        <DropdownButton>
          更多
          <DropdownMenu className="dropdown-menu">
            <a href="/archive">归档</a>
            <a href="/tags">标签</a>
          </DropdownMenu>
        </DropdownButton>
        <a href="/rss">RSS</a>
      </MobileNavMenu>
    </NavContainer>
  );
}

补充桌面端元素的隐藏规则：

.desktop-only {
  display: flex;
  gap: 1.5rem;
}

@media (max-width: 968px) {
  .desktop-only {
    display: none;
  }
}

四、组件挂载渲染Hook的优化 #

你提到的依赖挂载状态渲染的方案存在冗余，更优处理方式：

1. Styled Components本身会随组件渲染注入样式，无需额外挂载状态触发，若出现样式不生效，优先检查Next.js的SSR适配：安装babel-plugin-styled-components并在next.config.js中配置，确保服务端能正确处理样式。
2. 若确实需要等待DOM加载后执行逻辑，直接用空依赖的useEffect即可，无需额外维护挂载状态：

useEffect(() => {
  // 此处编写需DOM加载后执行的逻辑，比如调整下拉菜单位置
}, []);

内容的提问来源于stack exchange，提问作者dereckmezquita