在React Bootstrap中无需额外toggle JS处理实现子菜单点击折叠

你的问题核心是：自定义的Link组件放在NavDropdown里时，点击后不会自动关闭下拉菜单，而用NavDropdown.Item的菜单却能正常关闭。这是因为NavDropdown.Item内部已经集成了点击关闭下拉的逻辑，直接用Link不会触发这个逻辑。

不用写额外的toggle函数，有两种简单的解决办法：

方案一：用NavDropdown.Item包裹Link组件 #

把User下拉菜单里的直接Link改成用NavDropdown.Item包裹，让点击事件触发下拉关闭：

<NavDropdown title="User">
  <NavDropdown.Item as="div">
    <Link className="nav-link" to="/personhood">
      验证你的账户
    </Link>
  </NavDropdown.Item>
  <NavDropdown.Item as="div">
    <Link className="nav-link" to="/prefs">
      设置
    </Link>
  </NavDropdown.Item>
</NavDropdown>

这里as="div"让NavDropdown.Item渲染成容器元素，点击它时会触发NavDropdown的关闭逻辑，同时内部的Link负责路由跳转。

方案二：直接给NavDropdown.Item指定as为Link组件 #

如果用的是React Router的Link，可以直接把NavDropdown.Item的as属性设为Link，这样既保留下拉关闭的功能，又实现路由跳转，代码更简洁：

// 先导入Link
import { Link } from 'react-router-dom';

// ...

<NavDropdown title="User">
  <NavDropdown.Item as={Link} to="/personhood" className="nav-link">
    验证你的账户
  </NavDropdown.Item>
  <NavDropdown.Item as={Link} to="/prefs" className="nav-link">
    设置
  </NavDropdown.Item>
</NavDropdown>

修改后的完整Navbar代码 #

<Navbar collapseOnSelect className="bg-body-secondary" style={{width: "auto"}}>
  <Nav>
    <Link className="nav-link" to={"/item/"+root}>主文件夹</Link>{" "}
  </Nav>
  <Nav>
    <Link className="nav-link" to="/latest">最新文章</Link>{" "}
  </Nav>
  <Nav>
    <NavDropdown title="用户">
      <NavDropdown.Item as={Link} to="/personhood" className="nav-link">
        验证你的账户
      </NavDropdown.Item>
      <NavDropdown.Item as={Link} to="/prefs" className="nav-link">
        设置
      </NavDropdown.Item>
    </NavDropdown>
  </Nav>
  <Nav>
    <Link className="nav-link" to="https://docs.zoncircle.com">我们的网站</Link>
  </Nav>
  <Nav>
    <Link className="nav-link" to="https://docs.zoncircle.com/invest/">投资</Link>
  </Nav>
  <Nav>
    <NavDropdown title="关于">
      <NavDropdown.Item href="https://docs.zoncircle.com/blog-archive/">博客</NavDropdown.Item>
      <NavDropdown.Item href="https://docs.zoncircle.com/about-us/">关于我们</NavDropdown.Item>
      <NavDropdown.Item href="https://docs.zoncircle.com/our-partners/">合作伙伴</NavDropdown.Item>
      <NavDropdown.Item href="https://docs.zoncircle.com/#team">团队成员</NavDropdown.Item>
      <NavDropdown.Item href="https://docs.zoncircle.com/carbon-pledge/">碳中和承诺</NavDropdown.Item>
    </NavDropdown>
  </Nav>
  <Nav>
    <NavDropdown title="博客">
      <NavDropdown.Item href="https://docs.zoncircle.com/blog-archive/">所有文章</NavDropdown.Item>
      <NavDropdown.Item href="https://docs.zoncircle.com/author/user/">CEO专栏</NavDropdown.Item>
      <NavDropdown.Item href="https://docs.zoncircle.com/social-media/">社交媒体</NavDropdown.Item>
    </NavDropdown>
  </Nav>
</Navbar>

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