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

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

在我的useEffect方法中，我将依赖项指定为resultsRef，因此我希望仅在加载内容div时将resultRef写入时才调用该依赖项，但这不是这种情况。

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

ReactJS如何使用钩子/函数滚动到元素

1 个答案: