React中个人资料下拉列表无法切换的问题求助

核心问题分析 #

1. React语法错误：误用原生HTML的class属性 #

React组件中设置元素类名必须使用className，而非原生HTML的class。你代码里的菜单div使用了class="menu"，会导致样式无法正确绑定，同时不符合React语法规范。

2. 样式与渲染逻辑不匹配 #

你的CSS定义了.menu.active来控制菜单显示，但组件通过{toggle && ...}直接挂载/卸载菜单元素。而默认.menu样式设置了visibility: hidden; opacity: 0;，导致即使元素渲染，也会因默认样式隐藏而无法看到。

3. CSS笔误 #

样式中box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);是错误写法，应为box-shadow，这会导致菜单阴影效果失效。

修复方案 #

方案一：用状态控制类名（保留过渡动画，推荐） #

不直接卸载元素，通过切换active类实现显示/隐藏，保留CSS的过渡动画效果：

修改后的dropdown.js：

import React, { useState } from "react";
import "./style.css";

function DropdownNavbar() {
  const [toggle, setToggle] = useState(false);

  const menuToggle = () => {
    setToggle(!toggle);
  };

  return (
    <>
      <div className="new-box d-flex" onClick={menuToggle}>
        <div className="profile p-2 flex-fill">
          <img src="images/avatar-img.png" alt="用户头像" />
        </div>
        <div className="name-text p-2 flex-fill">Alex John</div>
      </div>
      {/* 动态绑定active类 */}
      <div className={`menu ${toggle ? 'active' : ''}`}>
        <ul>
          <li>
            <a href="#">My profile</a>
          </li>
          <li>
            <a href="#">Inbox</a>
          </li>
          <li>
            <a href="#">Logout</a>
          </li>
        </ul>
      </div>
    </>
  );
}

export default DropdownNavbar;

方案二：修改CSS保留条件渲染 #

若坚持使用{toggle && ...}的挂载/卸载逻辑，需修改.menu默认样式，移除隐藏属性：

修改后的style.css中.menu部分：

.menu {
  position: absolute;
  top: 80px;
  right: -10px;
  padding: 10px 20px;
  background: #fff;
  width: 200px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); /* 修正box-sizing为box-shadow */
  border-radius: 15px;
  /* 移除visibility和opacity的隐藏设置 */
}

额外优化建议 #

• 给img标签添加alt属性，符合React规范与无障碍要求。
• 确保导航栏父容器设置position: relative;，避免菜单的绝对定位相对于整个页面偏移。

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