VS2019 ASP.NET Core+React模板如何正常显示NavbarToggler组件

根因说明 #

该默认模板内置的reactstrap与Bootstrap版本存在依赖兼容问题，同时NavMenu.tsx中未正确绑定导航栏折叠状态的控制逻辑，导致NavbarToggler等组件无响应。

修复步骤 #

• 第一步：替换匹配版本的依赖
  进入项目的ClientApp目录，执行以下命令：

  npm uninstall reactstrap bootstrap
  npm install reactstrap@8.10.1 bootstrap@4.6.2 --save
  

• 第二步：修正NavMenu.tsx状态绑定逻辑
  打开..\ClientApp\src\components\NavMenu.tsx文件，修改代码如下：
  1. 导入useState钩子（如果已有则跳过）：

  import { useState } from 'react';
  

  2. 在NavMenu组件内部添加状态控制逻辑：

  const [isOpen, setIsOpen] = useState(false);
  const toggleNavbar = () => setIsOpen(!isOpen);
  

  3. 修改NavbarToggler组件绑定点击事件：

  <NavbarToggler onClick={toggleNavbar} />
  

  4. 修改Collapse组件绑定展开状态：

  <Collapse isOpen={isOpen} navbar>
  

• 第三步：确认Bootstrap样式正确引入
  打开..\ClientApp\src/App.tsx或index.tsx，在文件最顶部添加样式引入（如果已有旧的Bootstrap样式引入请删除替换）：

  import 'bootstrap/dist/css/bootstrap.min.css';
  

• 第四步：验证修复效果
  回到Visual Studio，重新构建项目后按F5运行，可看到小屏幕下NavbarToggler正常显示，点击可正常展开折叠导航栏，其他Bootstrap相关组件也可正常使用。

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