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

Posted 2023-03-17

【中文标题】使用 React useEffect 在页面加载时滚动到元素中的位置

【英文标题】：Scrolling to a position in an element on page load with React useEffect

【发布时间】：2020-04-30 17:07:06

【问题描述】：

我想在元素被 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。我错过了什么，我该如何完成这项工作？

【问题讨论】：

我在沙箱中试过你的代码。 codesandbox.io/s/objective-visvesvaraya-zngjp 。没有setTimeout它工作正常。在这里检查。

2020 和同样的问题在这里。适用于超时。

【参考方案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>
  )