React中实现动态导航栏：从jQuery平滑迁移交互与滚动效果

$('.navTrigger').click(function () {
    $(this).toggleClass('active'); // 切换汉堡图标状态
    $("#mainListDiv").toggleClass("show_list"); // 显示/隐藏菜单列表
    $("#mainListDiv").fadeIn(); // jQuery的fadeIn效果，可能与toggleClass冲突
});

import React, { useState } from 'react';
import './Navbar1.css'; // 确保CSS文件已正确引入

const Navbar = () => {
    // 定义一个状态来控制菜单的打开/关闭
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    // 点击事件处理函数，用于切换菜单状态
    const toggleMenu = () => {
        setIsMenuOpen(prevState => !prevState);
    };

    return (
        <div className="header">
            {/* nav 元素的 className 同样需要根据滚动状态动态添加，这部分在下一节实现 */}
            <nav className="nav">
                <div className="container">
                    <div className="logo">
                        <a href="#">Your Logo</a>
                    </div>
                    {/* 根据 isMenuOpen 状态，为 mainListDiv 动态添加或移除 'show_list' 类 */}
                    <div id="mainListDiv" className={isMenuOpen ? "show_list" : "main_list"}>
                        <ul className="navlinks">
                            <li><a href="#">About</a></li>
                            <li><a href="#">Portfolio</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                    {/* 根据 isMenuOpen 状态，为 navTrigger 动态添加或移除 'active' 类 */}
                    <span className={`navTrigger ${isMenuOpen ? 'active' : ''}`} onClick={toggleMenu}>
                        <i></i>
                        <i></i>
                        <i></i>
                    </span>
                </div>
            </nav>
        </div>
    );
};

export default Navbar;

$(window).scroll(function() {
    if ($(document).scrollTop() > 50) {
        $('.nav').addClass('affix'); // 滚动超过50px时添加 'affix' 类
    } else {
        $('.nav').removeClass('affix'); // 否则移除 'affix' 类
    }
});

import React, { useState, useEffect } from 'react';
import './Navbar1.css';

const Navbar = () => {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    // 定义一个状态来控制导航栏是否吸顶
    const [isAffixed, setIsAffixed] = useState(false);

    const toggleMenu = () => {
        setIsMenuOpen(prevState => !prevState);
    };

    // 使用 useEffect 来处理滚动事件的副作用
    useEffect(() => {
        const handleScroll = () => {
            // 判断滚动距离是否超过50px
            if (window.scrollY > 50) {
                setIsAffixed(true);
            } else {
                setIsAffixed(false);
            }
        };

        // 组件挂载时添加滚动事件监听器
        window.addEventListener('scroll', handleScroll);

        // 组件卸载时移除滚动事件监听器，防止内存泄漏
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []); // 空依赖数组表示此 effect 只在组件挂载时运行一次，并在卸载时清理

    return (
        <div className="header">
            {/* 根据 isAffixed 状态，为 nav 元素动态添加或移除 'affix' 类 */}
            <nav className={`nav ${isAffixed ? 'affix' : ''}`}>
                <div className="container">
                    <div className="logo">
                        <a href="#">Your Logo</a>
                    </div>
                    <div id="mainListDiv" className={isMenuOpen ? "show_list" : "main_list"}>
                        <ul className="navlinks">
                            <li><a href="#">About</a></li>
                            <li><a href="#">Portfolio</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                    <span className={`navTrigger ${isMenuOpen ? 'active' : ''}`} onClick={toggleMenu}>
                        <i></i>
                        <i></i>
                        <i></i>
                    </span>
                </div>
            </nav>
        </div>
    );
};

export default Navbar;