我正在使用reactjs创建一个静态网站，所以我下载了一个模板，我使用reactjs将其划分为组件，但响应式崩溃导航雷达不再工作，我试图修复它，所以我尝试了许多解决方案，但我一无所获。没有错误，但代码仍然不能工作。
你能帮我请!这是导航条组件。
import React, {useState,useEffect} from 'react';
import '../assets/css/style.css';
import '../assets/css/slick.css';
import '../assets/css/magnific-popup.css';
import '../assets/css/animate.css';
import '../assets/css/bootstrap.min.css';
import '../assets/css/home7fonts.css';
import Logo from '../assets/images/logos/logo-black.png'
function Header()
{
const [toggleMenu, setToggleMenu] = useState(false)
const [screenWidth, setScreenWidth] = useState(window.innerWidth)
const toggleNav = () => {
setToggleMenu(!toggleMenu)
}
useEffect(() => {
const changeWidth = () => {
setScreenWidth(window.innerWidth);
}
window.addEventListener('resize', changeWidth)
return () => {
window.removeEventListener('resize', changeWidth)
}
}, [])
return (
<header className="main-header header-seven">
<div className="header-upper">
<div className="container-fluid clearfix">
<div className="header-inner d-flex align-items-center">
<div className="logo-outer">
<div className="logo"><a href=""><img src={Logo} alt="Logo" title="Logo"></img></a></div>
</div>
<div className="nav-outer clearfix d-flex align-items-center">
<nav className="main-menu navbar-expand-lg">
<div className="navbar-header">
<div className="mobile-logo py-15">
<a href="index.html">
<img src={Logo} alt="Logo" title="Logo"></img>
</a>
</div>
<button onClick={toggleNav} type="button" className="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
</div>
<div className="navbar-collapse collapse clearfix">
{(toggleMenu || screenWidth > 500) && (
<ul className="navigation onepage clearfix">
<li><a href="#home">Home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#services">services</a></li>
<li><a href="#faq">FAQs</a></li>
<li><a href="#pricing">pricing</a></li>
<li><a href="#testimonial">testimonial</a></li>
<li><a href="#blog">blog</a></li>
</ul>
)}
</div>
</nav>
<div className="header-number">
<i className="fas fa-phone-alt"></i>
<div className="number-content">
<span>Tell Us</span>
<a href="callto:+1223558656">+12 ) 235 - 586 - 56</a>
</div>
</div>
<div className="menu-btn">
<a href="#" className="theme-btn style-eight">Start Free Tral
<i className="fas fa-long-arrow-alt-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</header>
);
}
export default Header;
进入https://getbootstrap.com/docs/5.1/components/navbar/并复制一个您喜欢的折叠导航条。过去的代码在你的功能组件，并将class改为className，等等。
打开你的public文件夹在根目录。找到index.html。在<head>之间添加引导Css。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
在<div id="root">之后添加Bootstrap JS，
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
然后，重新加载react项目。