组件重新渲染（ReactJS / Gatsby）上的页面跳转

Question

描述问题

我正在为某人制作一个非常简单的ReactJS / Gatsby网站，当我重新发布它时，我的功能样式组件之一出现了问题。问题在于重新渲染完成后，这导致窗口跳转（滚动）。

重新渲染是由用户单击触发功能的span元素（封闭在li元素中）触发的。

li元素的列表由组件的状态确定。整个父组件的高度固定，这就是为什么我无法诊断问题的原因。

我期望发生的事情

要重新渲染的组件，窗口的滚动位置保持在用户启动时的位置。

实际发生的情况

当用户单击元素时，页面似乎会跳转（滚动）。有时会这样做，并保持在新位置，有时会这样做，然后返回到原始滚动位置。

我尝试过的东西

我尝试从其他建议使用event.preventDefault()的问题以及其他建议将样式移出组件本身，而选择使用类的建议中寻求建议。

这些解决方案均无效。

我已经确定地发现问题是由于setActiveTabs（导致ul元素的重新渲染）导致window.scrollY在触发之前和完成之后进行记录显示一个不同的值。

编辑2：

我设法弄清楚问题在于使列表项可定位。似乎添加tabIndex="0"属性或使li子级成为交互式元素都会导致此错误。

有人知道这种方法吗？

编辑

完整的前端源代码可以在以下GitHub存储库中找到：https://github.com/MakingStuffs/resinfusion

Answer 1

为了解决该问题，我需要防止将clicked元素定位于重新渲染。为此，我对clickHandler进行了编辑，以便在设置状态后使用element.blur()。

点击处理程序如下：

const forwardClickHandler = event => {
    setLoading(true)
    const clickedSlug =
      event.target.closest("button") !== null
        ? event.target.closest("button").getAttribute("data-slug")
        : event.target.children[0].getAttribute("data-slug")
        
    const categoryObject = getNeedle(clickedSlug, categories, "slug")
    const subCatObject = getNeedle(clickedSlug, subCategories, "slug")
    const serviceObject = getNeedle(clickedSlug, services, "slug")
    const associatedChildren = getAssociatedChildren(
      categoryObject
        ? categoryObject
        : subCatObject
        ? subCatObject
        : serviceObject
    )
    setBgImage(associatedChildren[0].thumb.localFile.childImageSharp.fluid)
    setActiveTabs(associatedChildren)
    event.target.blur()
    return setTimeout(() => setLoading(false), 1000)
  }