将jQuery导航栏交互迁移至React：状态管理、Refs与副作用的实践

$('.navTrigger').click(function () {
    $(this).toggleClass('active'); // 切换汉堡图标的'active'类
    console.log("Clicked menu");
    $("#mainListDiv").toggleClass("show_list"); // 切换主菜单的'show_list'类
    $("#mainListDiv").fadeIn(); // 菜单淡入效果
});

import React, { useState, useRef } from 'react';
import './Navbar.css'; // 确保导入了与Codepen一致的CSS文件

function Navbar() {
    // 状态：控制导航触发器（汉堡图标）的激活状态
    const [isActive, setIsActive] = useState(false);
    // Ref：获取主列表Div的DOM引用，用于直接操作其类名
    const mainListDivRef = useRef(null);

    // 点击事件处理函数
    const onClickNavTrigger = () => {
        // 切换汉堡图标的激活状态
        setIsActive(prevIsActive => !prevIsActive);

        // 使用Ref直接操作mainListDiv的类名，以实现show_list的切换
        if (mainListDivRef.current) {
            mainListDivRef.current.classList.toggle("show_list");
            // 对于jQuery的fadeIn效果，通常通过CSS过渡或动画配合show_list类来实现。
            // 例如，在CSS中定义：
            // .main_list { opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in, visibility 0.3s; }
            // .show_list { opacity: 1; visibility: visible; }
        }
    };

    return (
        <div className="header">
            <nav className="nav"> {/* 注意：class在JSX中是className */}
                <div className="container">
                    <div className="logo">
                        <a href="#">Your Logo</a>
                    </div>
                    {/* 使用Ref绑定到DOM元素 */}
                    <div id="mainListDiv" ref={mainListDivRef} className="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>
                    {/* 根据isActive状态动态添加/移除'active'类 */}
                    <span className={`navTrigger ${isActive ? 'active' : ''}`} onClick={onClickNavTrigger}>
                        <i></i>
                        <i></i>
                        <i></i>
                    </span>
                </div>
            </nav>
        </div>
    );
}

export default Navbar;

$(window).scroll(function() {
    if ($(document).scrollTop() > 50) { // 判断滚动距离是否超过50px
        $('.nav').addClass('affix'); // 添加'affix'类
        console.log("OK");
    } else {
        $('.nav').removeClass('affix'); // 移除'affix'类
    }
});

import React, { useState, useRef, useEffect } from 'react';
import './Navbar.css'; // 确保导入了与Codepen一致的CSS文件

function Navbar() {
    // 状态：控制导航触发器（汉堡图标）的激活状态
    const [isActive, setIsActive] = useState(false);
    // Ref：获取主列表Div的DOM引用
    const mainListDivRef = useRef(null);
    // 状态：控制导航栏是否处于固定（affix）状态
    const [isNavAffixed, setIsNavAffixed] = useState(false);

    // 点击事件处理函数
    const onClickNavTrigger = () => {
        setIsActive(prevIsActive => !prevIsActive);
        if (mainListDivRef.current) {
            mainListDivRef.current.classList.toggle("show_list");
        }
    };

    // 滚动事件处理函数
    const handleScroll = () => {
        if (window.scrollY > 50) { // 判断滚动距离是否超过50px
            setIsNavAffixed(true);
        } else {
            setIsNavAffixed