将 jQuery 转换为反应：我似乎无法在 React.js 中使手柄切换和 animate.css 工作

问题描述

我是一名试图学习 React 的学生，我对如何将一组代码从 jQuery 转换为 React 非常迷茫。这是我目前所拥有的。

注意：我让 scrollHandler 函数正常工作，需要处理 ScrollUpButton 函数。谢谢。

之前：

 // slide-up script
        $('.scroll-up-btn').click(function(){
            $('html').animate({scrollTop: 0});
            // removing smooth scroll on slide-up button click
            $('html').css("scrollBehavior","auto");
        });

        $('.navbar .menu li a').click(function(){
            // applying again smooth scroll on menu items click
            $('html').css("scrollBehavior","smooth");
        });

        // toggle menu/navbar script
        $('.menu-btn').click(function(){
            $('.navbar .menu').toggleClass("active");
            $('.menu-btn i').toggleClass("active");
        });

之后：

import React,{ Component,useEffect,useState } from 'react';
// import Animate from 'animate.css-react';
import Navbar from '../Navigation/Navbar'
import "animate.css/animate.min.css";



export default function Scroll() {
    
   
    const [scroll,setScroll] = useState(false);
    
    const [isActive,setActive] = useState("false");
    
    const handletoggle = () => {
        setActive(!isActive);
    };
    
    useEffect(() => {

        
        const navBar = document.querySelector(".navbar");
        const scrollUpBtn = document.querySelector(".scroll-up-btn");
        const Html = document.querySelector(".html");
        const ScrollLink = document.querySelector(".navbar .menu li a");
        const MenuButtonI = document.querySelector(".menu-btn i");
        const MenuButton = document.querySelector(".menu-btn");
        const navBarMenu = document.querySelector(".navbar .menu");
        
        const scrollHandler = () =>  {
            if(window.scrollY > 20) {   
                navBar?.classList.add("sticky");
               
            }else{
               navBar?.classList.remove("sticky");
            }
            if(window.scrollY > 500) {
                scrollUpBtn?.classList.add("show");
            } else {
                scrollUpBtn?.classList.remove("show");
            }
        }
         
        const ScrollUpButton = () => {
            scrollUpBtn.onClick = () => {
                <ScrollAnimation animateIn="fadeIn" scrollTop= "0">
                    Html... this is the start of my confusion...
                </ScrollAnimation>
            }

            ScrollLink.onClick = () => {
                Html.css("scrollBehavior","smooth") 
                //I am lost here too... 
            }
            MenuButton.onClick = () => {
                
                navBarMenu.handletoggle("active");
                MenuButtonI.handletoggle("active")
                //I don't think I am using handletoggle right...
            }
        }



        window.addEventListener("scroll",scrollHandler);

        return () => {
            window.removeEventListener("scroll",scrollHandler);
        };

    },[]);
    return (
        <></>
    )
}

这可能是一个艰难的过程。我提前感谢您查看我的代码！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）