将jQuery导航栏交互代码转为React遇问题，寻求技术帮助

一、修复汉堡菜单点击无响应问题 #

你的代码存在两个核心问题导致菜单功能失效：

1. JSX属性错误：React的JSX语法中，HTML原生的class属性必须替换为className，否则React无法正确识别并应用样式。
2. 未同步汉堡按钮的状态类：原jQuery代码点击时会给.navTrigger添加active类来切换成X形，但你的React代码只控制了菜单容器的类，没有同步更新按钮的状态类。

修改后的Navbar组件代码：

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

class Navbar extends Component {
    state = { navbarActive: false }

    navbarClick = () => {
        this.setState({ navbarActive: !this.state.navbarActive })
    };

    render() {
        const { navbarActive } = this.state;
        return (
            <div className="header">
                <nav className="nav">
                    <div className="container">
                        <div className="logo">
                            <a href="#">Your Logo</a>
                        </div>
                        <div 
                            id="mainListDiv" 
                            className={navbarActive ? "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 ${navbarActive ? 'active' : ''}`} 
                            onClick={this.navbarClick}
                        >
                            <i></i>
                            <i></i>
                            <i></i>
                        </span>
                    </div>
                </nav>
            </div>
        );
    }
}

export default Navbar;

二、实现滚动监听添加导航栏背景功能 #

在React中，我们通过生命周期函数管理滚动事件监听，用state控制导航栏的affix类：

完整组件代码（包含滚动监听）：

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

class Navbar extends Component {
    state = { 
        navbarActive: false,
        isScrolled: false
    }

    navbarClick = () => {
        this.setState({ navbarActive: !this.state.navbarActive })
    };

    handleScroll = () => {
        const scrollTop = window.scrollY;
        this.setState({ isScrolled: scrollTop > 50 });
    };

    componentDidMount() {
        window.addEventListener('scroll', this.handleScroll);
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll);
    }

    render() {
        const { navbarActive, isScrolled } = this.state;
        return (
            <div className="header">
                <nav className={`nav ${isScrolled ? 'affix' : ''}`}>
                    <div className="container">
                        <div className="logo">
                            <a href="#">Your Logo</a>
                        </div>
                        <div 
                            id="mainListDiv" 
                            className={navbarActive ? "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 ${navbarActive ? 'active' : ''}`} 
                            onClick={this.navbarClick}
                        >
                            <i></i>
                            <i></i>
                            <i></i>
                        </span>
                    </div>
                </nav>
            </div>
        );
    }
}

export default Navbar;

补充说明 #

• 原jQuery的fadeIn()效果，只要你的CSS中.show_list类包含正确的过渡动画逻辑，修改类名后就能自动触发，无需额外JS处理。
• 使用原生JS的window.scrollY替代jQuery的$(document).scrollTop()，更符合React的无依赖理念。
• 组件卸载时必须移除滚动监听，避免内存泄漏。

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