Javascript 无法在顶级调用React自定义挂钩

编辑：我在export语句中调用钩子函数，比如

export default useCollHide（）

。对不起，我花了两个半小时才弄明白

我必须使两个组件在向下滚动时隐藏。 因为他们有相同的逻辑，我为这种行为做了一个定制的钩子

function useScrollHide(
  scrollUpClasses = [],
  scrollDownClasses = [],
  elementRef
) {
  const [prevScrollPos, setPrevScrollPos] = useState(window.pageYOffset);

  function hideNavOnScroll() {
    if (window.innerWidth >= 1024) return;
    const currentScrollPos = window.pageYOffset;
    // when true we are scrolling up and when false we are scrolling down
    let isScrollingUp = prevScrollPos > currentScrollPos;
    if (isScrollingUp) {
      scrollUpClasses.forEach((className) =>
        elementRef.current.classList.add(className)
      );
      scrollDownClasses.forEach((className) =>
        elementRef.current.classList.remove(className)
      );
    } else if (!isScrollingUp) {
      scrollUpClasses.forEach((className) =>
        elementRef.current.classList.remove(className)
      );
      scrollDownClasses.forEach((className) =>
        elementRef.current.classList.add(className)
      );
    }

    setPrevScrollPos(currentScrollPos);
  }

  useEffect(() => {
    window.addEventListener("scroll", hideNavOnScroll);
    return () => window.removeEventListener("scroll", hideNavOnScroll);
  }, [prevScrollPos]);
}

然后，当我在组件中使用此自定义挂钩时：

function MainHeader() {
  const mainHeader = useRef(null);
  const drawerMenu = useRef(null);
  const blurryOverlay = useRef(null);
  const navSearch = useRef(null);
  useScrollHide(["translate-y-0"], ["-translate-y-full"], mainHeader);
  ...

---

我得到的错误是，

React Hook“UseCollHide”不能在顶层调用。必须在React函数组件或自定义React钩子函数中调用React钩子

是否导入了React本身？