Javascript 旋转木马使屏幕在幻灯片更改时移到页面顶部

（本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])

---

可能是因为我在

useffect

函数中使用

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])

---

@coreyward如何包含多个问题？我在问为什么当幻灯片索引增加时屏幕会移动。你甚至没有遵循最基本的React示例，因此你的错误是因为你拒绝这样做。由于您拒绝按预期方式使用框架而调试复杂的浏览器问题完全超出范围。引用React文档，我将您与上次您发布此问题时的内容一字不差地联系起来：“根据我们的经验，考虑UI在任何给定时刻的外观，而不是如何随时间变化，可以消除一整类错误。”@coreyward我并没有拒绝做任何事情。你要我做的事我不清楚。我不应该更新React元素的css以更改为

display:none

？这是我能从你分享的链接中得到的唯一东西。很抱歉，我不是想表现得咄咄逼人，我真的不明白你想给我什么建议。你是在直接操纵DOM，而不是使用React来呈现更改。如果您遵循React指南和教程，您将了解组件生命周期以及如何处理状态。