我需要简化这些反应代码行,我发现有点重复,但我不知道是否有任何方法可以改进这一点
任何想法都会收到!!!
useEffect(() => {
document.addEventListener("scroll", () => {
// Prices
if(document.querySelector("#prices").getBoundingClientRect().top == 78){
document.querySelector(".pricesArr").style.opacity = 1
document.querySelector(".pricesArr").classList.add("pricesArrAnim")
}
else if(document.querySelector("#prices").getBoundingClientRect().top > 660){
document.querySelector(".pricesArr").style.opacity = 0
document.querySelector(".pricesArr").classList.remove("pricesArrAnim")
}
// Contact
if(document.querySelector("#contact").getBoundingClientRect().top == 78){
document.querySelector(".contact").style.opacity = 1
document.querySelector(".contact").classList.add("contactAnim")
}
else if(document.querySelector("#contact").getBoundingClientRect().top > 660){
document.querySelector(".contact").style.opacity = 0
document.querySelector(".contact").classList.remove("contactAnim")
}
// Moreinfo
if(document.querySelector("#moreinfo").getBoundingClientRect().top == 78){
document.querySelector(".moreinfo").style.opacity = 1
document.querySelector(".moreinfo").classList.add("moreinfoAnim")
}
else if(document.querySelector("#moreinfo").getBoundingClientRect().top > 660){
document.querySelector(".moreinfo").style.opacity = 0
document.querySelector(".moreinfo").classList.remove("moreinfoAnim")
}
})
})
除非您计划添加一大堆,否则无需过早优化,否则一些 if else 语句没有任何问题。但是,如果您要添加更多案例,您可以执行以下操作(未经测试):
useEffect(() => {
document.addEventListener("scroll", () => {
const select = document.querySelector;
[
{ idEl: select("#prices"), classEl: select(".pricesArr"), newClass: "pricesArrAnim" },
{ idEl: select("#contact"), classEl: select(".contact"), newClass: "contactAnim" },
{ idEl: select("#moreinfo"), classEl: select(".moreinfo"), newClass: "moreinfoAnim" }
].forEach(obj => {
if(obj.idEl.getBoundingClientRect().top == 78){
obj.classEl.style.opacity = 1
obj.classEl.classList.add(obj.newClass)
}
else if(obj.idEl.getBoundingClientRect().top > 660){
obj.classEl.style.opacity = 0
obj.classEl.classList.remove(obj.newClass)
}
});
})
})
因此,在这种情况下,如果您想添加另一个案例,只需使用您需要的
idEl
、classEl
和 newClass
将另一个对象添加到数组中,它也会这样做。一行添加另一个案例。