如何滚动到带有钩子/函数的元素？

Posted 2023-02-22

【中文标题】如何滚动到带有钩子/函数的元素？

【英文标题】：How to scroll to an element with hooks/functions?

【发布时间】：2019-09-28 20:47:51

【问题描述】：

我想再次问this question，但现在问我如何使用函数/挂钩来实现这一点。

我尝试使用 useRef，然后访问偏移量表单 current.offsetTop，但是在安装组件后我很难访问此 ref。

function ScrollComponent(props) 
  const foo = false; //loading method
  let resultsRef = useRef();

  useEffect(() => 
    window.scrollTo(
      behavior: "smooth",
      top: resultsRef.current.offsetTop
    );
  , [resultsRef]);

  if (foo)
    return (
      <div>
        <h4>Loading...</h4>
      </div>
    );
  return (
    <div ref=resultsRef>
      <h4>content</h4>
    </div>
  );

在上面的示例中，我有一个名为 foo 的 const，它不需要附加此滚动引用，因为它在内容加载时显示。

但是，当运行此代码时，我得到 Cannot read property 'offsetTop' of undefined

在我的 useEffect 方法中，我将依赖项指定为 resultsRef，因此我希望仅在加载内容 div 时写入 resultsRef 时调用它，但是，情况并非如此。

【问题讨论】：

你喜欢使用基于类的组件吗？

否 @ChristopherNgo 我在使用函数和钩子时寻求帮助，如果我使用的是类，我会使用我链接到的上一个问题。

【参考方案1】：

在将引用附加到未定义的 div ref.current 之前，请在效果中添加一个 if 检查以检查它是否未定义。

另外，我们应该听 isLoading 状态而不是 ref 对象。

const [isLoading, setIsLoading] = useState(true);

useEffect(
  () => 
    if (resultsRef.current) 
      window.scrollTo(
        behavior: "smooth",
        top: resultsRef.current.offsetTop
      );
    
  ,
  [isLoading]
);

【讨论】：

谢谢，我试过了，但是代码永远不会被调用。在调用加载返回时调用 useEffect 代码，但在调用内容时不调用。

啊，我的错，我们应该添加加载作为我们的依赖而不是 resultRef，将在几秒钟内编辑。

谢谢，效果很好。为什么我需要使用加载作为依赖项？什么时候没有改变 ref 对象？