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

Question

我想再次问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 时调用它，但是，情况并非如此。

Answer 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]
);