【发布时间】：2022-07-05 17:46:44
【问题描述】：
我正在使用 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;
【问题讨论】：
-
这就是您添加
screenWidth > 500的原因，它正在发生问题。
标签： reactjs