如何解决将 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 举报,一经查实,本站将立刻删除。