React多下拉菜单导航栏开发求助：实现QA/Users/Stats下拉

当前代码的核心问题是用单个布尔值控制所有下拉状态，无法独立展开不同导航项的菜单；同时DropDown组件硬编码了QA的下拉数据，无法复用。以下是修复后的完整代码：

1. 更新 NavItems.jsx #

给需要下拉的导航项添加dropdown属性，关联对应的下拉数据数组：

export const navItems = [
  {
    id: 1,
    title: 'MIR',
    path: '/mir',
    cName: 'nav-item'
  },
  {
    id: 2,
    title: 'QA',
    path: '/qa',
    cName: 'nav-item',
    dropdown: 'QA' // 关联对应的下拉数据标识
  },
  {
    id: 3,
    title: 'Users',
    path: '/users',
    cName: 'nav-item',
    dropdown: 'Users' // 关联对应的下拉数据标识
  },
  {
    id: 4,
    title: 'Stats',
    path: '/stats',
    cName: 'nav-item',
    dropdown: 'Stats' // 关联对应的下拉数据标识
  },
  {
    id: 5,
    title: 'Tools',
    path: '/tools',
    cName: 'nav-item'
  },
  {
    id: 6,
    title: 'Sheets',
    path: '/sheets',
    cName: 'nav-item'
  },
  {
    id: 7,
    title: 'My Account',
    path: '/personal',
    cName: 'nav-item'
  },
];

export const QADropdown = [
  {
    id: 1,
    title: 'QA Job Selector',
    path: '/qaindex',
    cName: 'submenu-item'
  },
  {
    id: 2,
    title: 'View QA Results',
    path: '/finished_qa_jobs',
    cName: 'submenu-item'
  },
];

export const usersDropdown = [
  {
    id: 1,
    title: 'User Management',
    path: '/user-management',
    cName: 'submenu-item'
  },
  {
    id: 2,
    title: 'User Analytics',
    path: '/user-analytics',
    cName: 'submenu-item'
  },
];

export const statDropdown = [
  {
    id: 1,
    title: 'Performance Stats',
    path: '/performance-stats',
    cName: 'submenu-item'
  },
  {
    id: 2,
    title: 'Audit Logs',
    path: '/audit-logs',
    cName: 'submenu-item'
  },
];

2. 重构 Navbar.jsx #

用对象状态管理每个下拉的展开状态，统一处理所有带下拉的导航项：

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { navItems, QADropdown, usersDropdown, statDropdown } from '../navItems/NavItems'
import DropDown from '../Dropdown/DropDown'

const Navbar = () => {
  // 初始化所有需要下拉的项为折叠状态
  const [dropdowns, setDropdowns] = useState({
    QA: false,
    Users: false,
    Stats: false
  })

  // 切换指定导航项的下拉状态
  const toggleDropdown = (title, isOpen) => {
    setDropdowns(prev => ({ ...prev, [title]: isOpen }))
  }

  // 根据导航项title获取对应的下拉数据
  const getDropdownItems = (title) => {
    switch(title) {
      case 'QA': return QADropdown
      case 'Users': return usersDropdown
      case 'Stats': return statDropdown
      default: return []
    }
  }

  return (
    <>
     <nav className="navbar bg-teal-400 font-sans h-12 flex justify-center items-center fixed w-full">
        <Link to="/" className="text-white text-4xl font-bold">Company Name</Link>
        <ul className="nav-items flex list-none justify-center items-center w-3/4">
          {navItems.map((item) => {
            const hasDropdown = !!item.dropdown

            return (
              <li 
                key={item.id} 
                className={`flex items-center text-gray-200 mx-6 font-semibold hover:text-white ${hasDropdown ? 'h-12 relative' : ''}`}
                onMouseEnter={() => hasDropdown && toggleDropdown(item.title, true)} 
                onMouseLeave={() => hasDropdown && toggleDropdown(item.title, false)}
              >  
                <Link to={item.path}>{item.title}</Link>
                {/* 仅当当前项展开时渲染下拉组件 */}
                {hasDropdown && dropdowns[item.title] && (
                  <DropDown items={getDropdownItems(item.title)} />
                )}
              </li>
            )
          })}
        </ul>
        <button className="border-none text-white font-bold px-4 py-1">Logout</button>
     </nav>
    </>
  )
}

export default Navbar

3. 修改 DropDown.jsx 为通用组件 #

通过props接收下拉数据，动态渲染菜单内容：

import React from 'react'
import { Link } from 'react-router-dom'

const DropDown = ({ items }) => {
  return (
    <ul className='w-36 absolute list-none text-start top-12 bg-sky-300'>
      {items.map((item) => {
        return (
          <li key={item.id} className='text-white p-2 hover:bg-sky-400 cursor-pointer'>
            <Link 
              to={item.path} 
              className='w-full block'
            >
              {item.title} 
            </Link>
          </li>
        )
      })}
    </ul>
  )
}

export default DropDown;

关键修改点： #

• 用对象dropdowns替代单个布尔值，实现每个下拉菜单独立控制
• 给导航项添加dropdown标识，统一判断是否需要渲染下拉组件
• DropDown组件改为通用型，通过props接收下拉数据，避免硬编码
• 优化鼠标事件逻辑，仅对带下拉的项绑定交互事件

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