代码之家 › 专栏 › 技术社区 › Jesús Fernández

如果里面有查询选择器,我该如何优化这些重复的if?

if-statement reactjs css html javascript

Jesús Fernández · 技术社区 · 5 月前

我需要简化这些react代码行,我看到有点重复,但我不知道是否有任何方法可以改进这一点
任何想法都会被接受!!!

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")
      }
    })
  })

2 回复 | 直到 5 月前

LiquiD.S1nn3r 5 月前

这样的方法就可以了,只需稍微调整一下类名以匹配id/class选择器。

const determineVisibility = useCallback(selector => {    
    const boundaries = {
        visible: 78,
        transparent: 660
    }

    const elemToCheck = document.getElementById(selector);
    const elemToModify = document.querySelector("." + selector);
    const {top} = elemToCheck.getBoundingClientRect();
    
    if(top == boundaries.visible){
        elemToModify.style.opacity = 1
        elemToModify.classList.add(selector + "Anim")
    } else if(top > boundaries.transparent){
        elemToModify.style.opacity = 0
        elemToModify.classList.remove(selector + "Anim")
    }
}, [])    

useEffect(() => {
    document.addEventListener("scroll", () => {    
        ["prices", "contact", "moreinfo"].forEach(determineVisibility)    
    })
}, [determineVisibility])

此外,我建议您不要从匿名事件处理程序运行此函数,这会给将来清理侦听器带来问题。

Jayce444 5 月前

除非你打算再添加一大堆,否则不需要过早优化,几个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 你需要,它也会这样做。一行添加另一个案例。