组件重新渲染页面跳转（ReactJS/Gatsby）答案

【问题标题】：Page Jumps on Component Re-Render (ReactJS/Gatsby)组件重新渲染页面跳转（ReactJS/Gatsby）
【发布时间】：2020-11-16 01:06:15
【问题描述】：

描述问题

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

用户单击触发函数的 span 元素（包含在 li 元素中）触发重新渲染。

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

我期望会发生什么

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

实际发生的情况

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

我的尝试

我已尝试遵循其他问题的建议，这些建议建议使用 event.preventDefault() 和其他建议将样式从组件本身移出，而是选择使用类。

这些解决方案都不起作用。

我已经设法明确地发现问题是由于 setActiveTabs 造成的——这会导致 ul 元素的重新渲染——因为在它触发之前和完成之后记录 window.scrollY 都会显示不同的值.

编辑 2：

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

有人知道解决这个问题的方法吗？

编辑

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

【问题讨论】：

标签： javascript reactjs gatsby styled-components react-functional-component

【解决方案1】：

为了解决这个问题，我需要防止被点击的元素被重新渲染。为了做到这一点，我编辑了 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)
  }

【讨论】：