React中如何实现仅一个下拉菜单激活，其余自动关闭

我正在开发一个下拉导航组件，需求是点击导航项时仅保持一个下拉菜单处于激活状态，其余自动关闭。目前我的实现逻辑如下，但遇到了问题：当点击两个导航项时，两个下拉菜单会同时展开。请问如何实现仅激活一个下拉菜单，并将其他菜单的状态设为false？

原始代码：

export default function Header(args) {
    const [isActive, setActive] = useState(false);
    const [isResourceActive, setResourceActive] = useState(false);
        
    const handleToggle = () => {setActive(!isActive);};
    const resourcesHandleToggle = () => {setResourceActive(!isResourceActive);};

         return (
    <NavItem onClick={handleToggle} className={isActive ? "active" : ""}></NavItem>  
    <NavItem onClick={resourcesHandleToggle} className={isResourceActive ? "active" :""}></NavItem>
        
        <div className={isActive ? "active": ""}>DROPDOWN_1</div>
        <div className={isResourceActive ?"active": ""}>DROPDOWN_2</div>
    )
}

不用多个独立的状态变量，改用单个状态来记录当前激活的下拉菜单标识，这样就能确保同一时间只有一个菜单处于激活状态。

修改后的代码实现： #

import { useState } from 'react';

export default function Header(args) {
    // 用单个状态存储当前激活的下拉菜单标识，初始值为null表示无菜单激活
    const [activeDropdown, setActiveDropdown] = useState(null);
        
    // 通用切换函数，接收菜单标识作为参数
    const handleDropdownToggle = (dropdownId) => {
        // 如果点击的是当前已激活的菜单，就关闭它；否则激活该菜单
        setActiveDropdown(prev => prev === dropdownId ? null : dropdownId);
    };

    return (
        <>
            <NavItem 
                onClick={() => handleDropdownToggle('dropdown1')} 
                className={activeDropdown === 'dropdown1' ? "active" : ""}
            >
                导航项1
            </NavItem>  
            <NavItem 
                onClick={() => handleDropdownToggle('dropdown2')} 
                className={activeDropdown === 'dropdown2' ? "active" : ""}
            >
                导航项2
            </NavItem>
            
            <div className={activeDropdown === 'dropdown1' ? "active": ""}>DROPDOWN_1</div>
            <div className={activeDropdown === 'dropdown2' ? "active": ""}>DROPDOWN_2</div>
        </>
    );
}

关键说明： #

• 用activeDropdown这个单一状态来跟踪当前激活的菜单，值可以是菜单的唯一标识（比如字符串、数字），null表示没有菜单激活。
• 通用的handleDropdownToggle函数处理所有导航项的点击逻辑：点击时判断当前激活的是否是该菜单，是的话就关闭（设为null），否则激活该菜单（设置为对应的标识）。
• 所有导航项和下拉菜单的active类都通过判断activeDropdown的值来决定是否添加，确保同一时间只有一个菜单处于激活状态。
• 后续新增下拉菜单时，只需扩展标识即可，无需新增状态变量，代码扩展性更强。

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