reactstrap Navbar点击后无法正常展开或折叠问题求助

问题原因 #

当前代码缺少控制折叠菜单显隐的状态绑定，<NavbarToggler>绑定的是空函数，<Collapse>组件也没有关联显隐状态，自然无法触发展开收起动作。

修复步骤 #

1. 在当前组件内引入useState声明控制导航栏折叠状态的变量
2. 编写状态切换函数绑定到<NavbarToggler>的onClick属性
3. 将状态变量绑定到<Collapse>的isOpen属性

修复后完整代码示例 #

import { useState } from 'react';
import { Navbar, NavbarBrand, NavbarToggler, Collapse, Nav, NavbarText } from 'reactstrap';

// 你的组件内部逻辑
const YourNavbarComponent = () => {
  // 声明折叠状态
  const [isOpen, setIsOpen] = useState(false);
  // 状态切换函数
  const toggleNavbar = () => setIsOpen(!isOpen);
  
  const handleLogout = () => {
    // 你原有的登出逻辑
  };

  return (
    <Navbar color="light" expand="md" light>
      <NavbarBrand href="/">QIFF DASHBOARD</NavbarBrand>
      {/* 绑定切换函数 */}
      <NavbarToggler onClick={toggleNavbar} />
      {/* 绑定显隐状态 */}
      <Collapse isOpen={isOpen} navbar>
        <Nav navbar>{createLinks(routes)}</Nav>
      </Collapse>
      <NavbarText onClick={handleLogout}>Logout</NavbarText>
    </Navbar>
  );
};

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