React单个按钮条件渲染问题：Profile下拉菜单不生效

你的代码主要存在三个问题，导致下拉菜单功能异常：

1. handleDropdown函数语法错误：缺少if关键字，条件判断无法执行
2. 点击事件参数传递错误：onClick里的item是事件对象，不是数组中的导航项，导致无法正确识别Profile按钮
3. 下拉菜单全局渲染：所有导航项都绑定了下拉菜单的显示逻辑，只要状态为true，所有按钮都会显示下拉

修改后的完整代码 #

import { useState } from 'react';
import { NavLink } from 'react-router-dom';
import { NavbarInfo } from '/NavbarInfo'

function Navbar() {
    const [navShow, setNavShow] = useState(false)
    const [showAccountsDropdown, setShowAccountsDropdown] = useState(false)

    const handleDropdown = (item) => {
        // 只有点击Profile时切换下拉状态，其他按钮点击直接关闭下拉
        if (item.name === 'Profile') {
            setShowAccountsDropdown(!showAccountsDropdown)
        } else {
            setShowAccountsDropdown(false)
        }
    }

    const handleNavSelect = () => {
        setNavShow(!navShow)
    }

    return (
        <div className='navbarContainer'>
            {NavbarInfo.map((item) => (
                <div className='navOptions flex justify-center items-center py-0' key={item.id}>
                    <NavLink 
                        to={item.link} 
                        className='flex flex-row-reverse'
                        onClick={() => {
                            handleNavSelect();
                            handleDropdown(item); // 传递当前遍历的导航项
                        }}
                    >
                        {/* 仅在Profile项且下拉状态为true时显示菜单 */}
                        {item.name === 'Profile' && showAccountsDropdown && <h1>More info</h1>}
                        {item.name}
                        <span className='mt-1 mx-1'>{item.icon}</span>
                    </NavLink>
                </div>
            ))}
        </div>
    )
}
export default Navbar

关键修改点说明 #

• 修复handleDropdown的条件判断语法，添加if关键字
• 调整onClick事件的参数传递，直接传入当前遍历的item（而非事件对象），确保能正确识别Profile按钮
• 限制下拉菜单的渲染范围：只有当前项是Profile且下拉状态为true时，才显示下拉内容
• 增加其他按钮点击时关闭下拉的逻辑，避免状态残留导致的异常显示

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