使用 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。我错过了什么，我怎样才能做到这一点？

Answer 1

如果您要求 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>
  )
}