将jQuery UI交互转换为React组件：状态管理与事件处理

$('.navTrigger').click(function () {
    $(this).toggleClass('active');
    $("#mainListDiv").toggleClass("show_list");
    $("#mainListDiv").fadeIn(); // 这里的fadeIn在React中通常通过CSS动画或状态控制实现
});

import React, { useState, useRef } from 'react';
import './Navbar.css'; // 假设CSS文件与Codepen保持一致

const Navbar = () => {
    // 使用useState管理汉堡菜单的激活状态
    const [isNavActive, setIsNavActive] = useState(false);
    // 使用useRef获取mainListDiv的DOM引用，以便在必要时直接操作类
    const mainListDivRef = useRef(null);

    // 点击事件处理函数
    const handleNavTriggerClick = () => {
        setIsNavActive(prev => !prev); // 切换激活状态

        // 如果需要更精细的控制，例如与CSS动画配合，可以直接操作DOM元素的类
        // 注意：这是一种在React中直接操作DOM的方式，应谨慎使用，
        // 优先通过状态和条件渲染/类名绑定实现。
        if (mainListDivRef.current) {
            mainListDivRef.current.classList.toggle("show_list");
            // 对于fadeIn效果，通常结合CSS transition/animation或React Transition Group库实现
            // 这里仅toggle类名，具体的动画效果由CSS负责
        }
    };

    return (
        <div className="header">
            <nav className="nav">
                <div className="container">
                    <div className="logo">
                        <a href="#">Your Logo</a>
                    </div>
                    {/* 根据isNavActive状态动态添加或移除类名 */}
                    <div id="mainListDiv" 
                         className={`main_list ${isNavActive ? "show_list" : ""}`}
                         ref={mainListDivRef}> {/* 绑定ref */}
                        <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>
                    {/* 根据isNavActive状态动态添加或移除类名 */}
                    <span className={`navTrigger ${isNavActive ? "active" : ""}`} 
                          onClick={handleNavTriggerClick}>
                        <i></i>
                        <i></i>
                        <i></i>
                    </span>
                </div>
            </nav>
        </div>
    );
};

export default Navbar;

$(window).scroll(function() {
    if ($(document).scrollTop() > 50) {
        $('.nav').addClass('affix');
    } else {
        $('.nav').removeClass('affix');
    }
});

import React, { useState, useEffect } from 'react';
// ... 其他导入和组件定义 ...

const Navbar = () => {
    const [isNavActive, setIsNavActive] = useState(false);
    const [isNavAffixed, setIsNavAffixed] = useState(false); // 新增状态：导航栏是否固定
    // const mainListDivRef = useRef(null); // 如果需要，保留此ref

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

    // 使用useEffect来添加和移除滚动事件监听器
    useEffect(() => {
        window.addEventListener('scroll', handleScroll);

        // 返回一个清理函数，在组件卸载时移除事件监听器
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []); // 空依赖数组表示只在组件挂载和卸载时执行

    const handleNavTriggerClick = () => {
        setIsNavActive(prev => !prev);
        // ... 其他逻辑 ...
    };

    return (
        <div className="header">
            {/* 根据isNavAffixed状态动态添加或移除类名 */}
            <nav className={`nav ${isNavAffixed ? "affix" : ""}`}>
                <div className="container">
                    <div className="logo">
                        <a href="#">Your Logo</a>
                    </div>
                    <div id="mainListDiv" 
                         className={`main_list ${isNavActive ? "show_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 ${isNavActive ? "active" : ""}`} 
                          onClick={handleNavTriggerClick}>
                        <i></i>
                        <i></i>
                        <i></i>
                    </span>
                </div>
            </nav>
        </div>
    );
};

export default Navbar;