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

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 加载时写入 resultsRef 时才被调用，但是，情况并非如此。

Answer 1

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

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

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

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