ReactJS拆分模板组件后折叠导航栏失效如何修复

拆分组件后导航折叠失效是三个核心问题导致的：

• 按钮上保留了Bootstrap原生折叠组件的data-toggle、data-target属性，但拆分组件后你没有引入Bootstrap对应的JS依赖（bootstrap.bundle.js中的折叠逻辑），这两个属性完全不生效
• 自定义的响应式断点和模板原生CSS规则不匹配，你写的screenWidth > 500阈值远小于模板默认的992px移动端触发点，导致中间宽度区间菜单显隐逻辑混乱
• 直接用条件渲染移除/添加整个菜单ul列表，没有给折叠容器加上模板CSS要求的显隐类名，导致配套的展开/收起样式、动画全部失效
• 缺少状态联动：窗口从移动端拉伸到桌面端时没有重置菜单收起状态，移动端点击菜单项跳转后也不会自动收起菜单

1. 移除按钮上无效的Bootstrap原生data属性，完全通过React状态控制菜单显隐，避免和Bootstrap原生JS逻辑冲突
2. 将响应式断点调整为和模板一致的991px（即宽度≤991px时触发移动端折叠模式）
3. 不要直接条件渲染菜单ul，改为给外层.navbar-collapse容器动态添加模板要求的show/in显隐类名，匹配原有CSS样式规则
4. 补充状态联动逻辑：窗口拉伸到桌面端时自动收起菜单，移动端点击导航链接后自动收起菜单

修复后的完整组件代码如下：

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'

// 响应式断点，和模板CSS规则保持一致
const MOBILE_BREAKPOINT = 991;

function Header()
{
    const [toggleMenu, setToggleMenu] = useState(false)
    const [screenWidth, setScreenWidth] = useState(window.innerWidth)
    
    const toggleNav = () => {
        setToggleMenu(!toggleMenu)
    }

    // 移动端点击菜单项后自动收起菜单
    const closeMobileMenu = () => {
        if(screenWidth <= MOBILE_BREAKPOINT) {
            setToggleMenu(false)
        }
    }

    useEffect(() => {
        const handleResize = () => {
            const currentWidth = window.innerWidth;
            setScreenWidth(currentWidth);
            // 切换到桌面端时重置菜单状态
            if(currentWidth > MOBILE_BREAKPOINT) {
                setToggleMenu(false)
            }
        }
        window.addEventListener('resize', handleResize)
        return () => {
            window.removeEventListener('resize', handleResize)
        }
    }, [])

    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" /></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="/">
                                        <img src={Logo} alt="Logo" title="Logo" />
                                    </a>
                                </div>
                                <button onClick={toggleNav} type="button" className={`navbar-toggle ${toggleMenu ? 'toggled' : ''}`}>
                                    <span className="icon-bar"></span>
                                    <span className="icon-bar"></span>
                                    <span className="icon-bar"></span>
                                </button>
                            </div>
                            {/* 动态添加显隐类名匹配模板CSS */}
                            <div className={`navbar-collapse collapse clearfix ${toggleMenu || screenWidth > MOBILE_BREAKPOINT ? 'in show' : ''}`}>
                                <ul className="navigation onepage clearfix">
                                    <li><a onClick={closeMobileMenu} href="#home">Home</a></li>
                                    <li><a onClick={closeMobileMenu} href="#about">about</a></li>
                                    <li><a onClick={closeMobileMenu} href="#services">services</a></li>
                                    <li><a onClick={closeMobileMenu} href="#faq">FAQs</a></li>
                                    <li><a onClick={closeMobileMenu} href="#pricing">pricing</a></li>
                                    <li><a onClick={closeMobileMenu} href="#testimonial">testimonial</a></li>
                                    <li><a onClick={closeMobileMenu} 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="tel:+1223558656">+12 ) 235 - 586 - 56</a>
                            </div>
                        </div>
                        <div className="menu-btn">
                            <a href="#" className="theme-btn style-eight">Start Free Trial
                                <i className="fas fa-long-arrow-alt-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
            );
}
export default Header;

• 不要额外引入Bootstrap的JS文件，纯React状态控制就可以满足需求，引入Bootstrap JS反而会和自定义状态逻辑冲突
• 原代码中手机号跳转用的callto:是错误协议，已替换为标准的tel:协议
• 原代码中logo链接写的index.html是静态模板的文件路径，React站点直接替换为根路径/即可，如果用了React Router可以替换为<Link>组件
• 原代码按钮文案“Start Free Tral”存在拼写错误，已修正为“Start Free Trial”，可按需保留原写法
• 如果展开时汉堡按钮的样式没有切换为关闭状态，可以在自定义CSS中补充.navbar-toggle.toggled .icon-bar的样式，和模板原生展开效果保持一致

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