使用React useEffect在页面加载时滚动到元素的位置

Question

我希望在React元素呈现之后立即滚动到指定的水平位置。为了了解上下文，我正在使用具有服务器端渲染的Next.js，因此useLayoutEffect不是一个选项。

export default function WideElement () {
  const ref = useRef(null)

  useEffect(function () {
    ref.current.scrollLeft = 1000
  }, [])

  return (
    <Container ref={ref}>
      ...
    </Container>
  )
}

然而，以上代码在页面加载时不会滚动。在这里，...表示一个长列表的子元素，它们水平堆叠并溢出容器。

我注意到，如果我对滚动施加一定的人为延迟，它似乎可以正常工作，并且Container立即向左滚动1000像素。

export default function WideElement () {
  const ref = useRef(null)

  useEffect(function () {
    setTimeout(function() {
      ref.current.scrollLeft = 1000
    }, 1000)
  }, [])

  return (
    <Container ref={ref}>
      ...
    </Container>
  )
}

我觉得我可能误解了useEffect。我错在哪里，如何使其正常工作？

- Kieran

---

我在沙盒中尝试了你的代码。https://codesandbox.io/s/objective-visvesvaraya-zngjp。没有setTimeout也可以正常工作。在这里检查。 - Kais

2020年，这里也有同样的问题。使用超时功能可以解决。 - Joan

Answer 1

如果您需要在挂载时执行某些操作并使 ref 可用，可以使用传递给 ref 属性的回调方法，而不是依赖于超时。回调方法接受节点作为参数，然后您可以从那里对其进行操作。

它还为您提供了响应任何 ref 更改或挂载/卸载的机会。

这比超时更可靠。

export default function WideElement () {
  const ref = useRef(null);

  const setRef = useCallback((node) => {
     if (node) {
         node.scrollLeft = 1000;  
     }
     ref.current = node;               
  },[]) 

  return (
    <Container ref={setRef}>
      ...
    </Container>
  )
}

- GBourke