轮播导致屏幕在幻灯片更改时移动到页面顶部答案

【问题标题】：Carousel causes screen to move to top of page on slide change轮播导致屏幕在幻灯片更改时移动到页面顶部
【发布时间】：2020-12-23 23:59:02
【问题描述】：

Minimum Reproducible Example on Github （此 MRE 中未显示图像，但这没关系，因为我想知道的问题与此无关）

问题： 每次幻灯片索引更改时，屏幕都会滚动到页面顶部。它会自动发生。

这种情况发生在

幻灯片编号增加 1
当幻灯片编号从 3->1 或从 2->0 递减时

但不会发生时

将幻灯片编号从幻灯片 2 增加到幻灯片 3（幻灯片编号为 0-3）。
幻灯片编号减 1。

注意：当幻灯片 3 为活动幻灯片时，意味着幻灯片 3 位于顶部，幻灯片 1 和 2 位于底部。

您可以在下面的这张 gif 图中看到我在说什么。

注意：（您在 gif 中看到的向下滚动是手动完成的。）

额外的（如果有用的话）

我认为这可能是由我的 useEffect 函数引起的，该函数循环遍历每张幻灯片并将它们分配为可见或不可见以及它们何时位于网格布局中。当幻灯片 4 处于活动状态时，这意味着将首先将幻灯片 1 和幻灯片 2 指定为底部幻灯片，然后将幻灯片 3 指定为不可见，然后将幻灯片 4 指定为顶部幻灯片。

  useEffect(() => {

    const slides = Array.from(document.getElementsByClassName('slide'))
    const dots = Array.from(document.getElementsByClassName('dot'))

    slides.forEach((slide, slideIdx) => {
      if(slideIdx === index){
        slide.className = "slide slide-un fade-in"
        dots[slideIdx].className = "dot activeDot"
        return
      } else if (slideIdx === index + 1 || slideIdx === 0 && index === squares.length - 1){
        slide.className = triple ? "slide slide-du fade-in" : "slide invisible"
      }else if (
        slideIdx === index + 2 || 
        (slideIdx === 0 && index === squares.length - 2) || 
        (slideIdx === 1 && index === squares.length - 1)
      ){
        slide.className = triple ? "slide slide-twa fade-in" : "slide invisible"
      }else{
        slide.className = "slide invisible"
      }
      dots[slideIdx].className = "dot"
    })

  }, [index])

【问题讨论】：

stackoverflow.com/questions/63732257/…
@coreyward 这如何包含多个问题？我在问为什么幻灯片索引增加时屏幕会移动
再一次，您甚至没有遵循最基本的 React 示例，因此您的错误源于您拒绝这样做。由于您拒绝按预期方式使用框架而调试复杂的浏览器问题完全超出了范围。引用我链接到你上次逐字发布这个问题的 React 文档：“根据我们的经验，考虑 UI 在任何给定时刻应该如何看待，而不是如何随着时间的推移而改变它，可以消除一整类错误。”
@coreyward 我没有拒绝做任何事情。你让我做的事情我不清楚。我不应该更新 React 元素的 css 以更改为 display: none 吗？这是我能够从您共享的链接中取出的唯一内容。很抱歉，我并不想变得咄咄逼人，我真的不明白你想给我什么建议
您正在直接操作 DOM，而不是使用 React 来呈现更改。如果您遵循 React 指南和教程，您将了解组件生命周期以及如何处理状态。

标签： javascript reactjs carousel gatsby gatsby-image

【解决方案1】：

可能导致问题的原因是我在useEffect 函数中使用document.getElementsByClassName 直接操作DOM，然后将每张幻灯片设置在网格中的某个位置，或者使幻灯片不可见.我更改了我的代码，以便在状态中记录一组幻灯片

const [slides, setSlides] = triple ? useState(squares.slice(0,3)) : useState([squares[0]])

然后我在 useEffect 函数中更新了幻灯片的状态，而不是操作它们的类名

  useEffect(() => {
    if (triple){
      if(index === squares.length - 1){
        setSlides([squares[index]].concat(squares.slice(0,2)))
      }else if(index === squares.length - 2){
        setSlides(squares.slice(index, index+2).concat([squares[0]]))
      }else{
        setSlides(squares.slice(index, index+3))
      }
    }else{
      setSlides([squares[index]])
    }
  }, [index])

【讨论】：