React-Bootstrap路由跳转时如何关闭已打开的NavDropdown组件

解决方案 #

这里提供两种可直接落地的实现方式：

方式1：使用受控组件模式（最稳定） #

React-Bootstrap的NavDropdown组件原生支持show和onToggle两个属性，你可以通过状态手动控制下拉菜单的显隐：

1. 首先定义显隐状态：

import { useState } from 'react';
import { useNavigate } from 'react-router-dom'; // 若使用react-router做路由跳转需引入

// 组件内定义状态
const [dropdownOpen, setDropdownOpen] = useState(false);
const navigate = useNavigate();

2. 修改NavDropdown绑定属性：

<Nav>
  {Object.keys(menuItems).map((itemKey) => (
    <NavDropdown
      title={menuItems[itemKey].title}
      show={dropdownOpen}
      onToggle={(isOpen) => setDropdownOpen(isOpen)}
    >
      {menuItems[itemKey].links.map(link => (
        <NavDropdown.Item
          key={link.route}
          onClick={() => {
            // 先关闭下拉
            setDropdownOpen(false);
            // 再执行路由跳转
            navigate(link.route);
          }}
        >
          {link.text}
        </NavDropdown.Item>
      ))}
    </NavDropdown>
  ))}
</Nav>

如果有多个独立的下拉菜单，可以把状态改成存当前打开的下拉菜单标识，比如：

const [openDropdownId, setOpenDropdownId] = useState(null);

每个NavDropdown判断自己的id是否和openDropdownId一致来决定是否显示即可。

方式2：非受控模式下强制关闭 #

如果你不想调整原有受控逻辑，也可以在路由跳转的点击事件里触发全局的下拉关闭：

const closeAllDropdowns = () => {
  // 找到所有打开的下拉元素，模拟外部点击触发关闭逻辑
  document.querySelectorAll('.dropdown.show').forEach(dropdown => {
    dropdown.classList.remove('show');
    dropdown.querySelector('.dropdown-menu')?.classList.remove('show');
  });
};

// 链接的onClick回调中调用
onClick={() => {
  closeAllDropdowns();
  navigate(link.route);
}}

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