如何使用钩子/功能滚动到元素？

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的常量，不需要在内容加载时附加此滚动引用。

但是，运行此代码时，我无法读取未定义的属性“ offsetTop”

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