TypeScript懒加载Hook失效：轮播组件无法加载问题求助

问题根源 #

1. Ref绑定错误：将ref={carouselRef.current}传给div，正确用法应为直接传ref={carouselRef}
2. Hook依赖缺失：useOnScreen的useEffect未监听ref变化，初始为空时无法触发observer绑定
3. TypeScript类型不明确：useRef未指定正确的DOM元素类型，导致类型推断异常

修复后的代码 #

1. HomePage组件修改

import { useRef } from "react";
import Carousel from "../components/carousel";
import useOnScreen from "../hooks/useOnScreen";

function HomePage() {
  // 修正类型断言，指定为HTMLDivElement（对应绑定的div元素）
  const carouselRef = useRef() as React.MutableRefObject<HTMLDivElement>;
  const isCarouselInView = useOnScreen(carouselRef);

  return (
    <div className="snap-y">
      {/* 第一部分内容 */}
      <div className="flex justify-center items-start relative min-h-[calc(100vh_-_5rem)] bg-black snap-start ">
        <div className="absolute w-full max-w-full overflow-hidden min-w-fit cone animate-wiggle"></div>
        <div className="grid justify-center grid-cols-4 max-w-7xl">
          {/* 内容 */}
        </div>
      </div>

      {/* 第二部分：轮播区域 - 修正ref绑定 */}
      <div className="z-20 pb-4 bg-black snap-start" ref={carouselRef}>
        {isCarouselInView && <Carousel />}
      </div>

      {/* 第三部分内容 */}
      <div className="flex items-start justify-center py-32 min-h-fit bg-slate-50 snap-start">
        {/* 更多内容 */}
      </div>
    </div>
  );
}

export default HomePage;

2. useOnScreen Hook修改

import { useState, useEffect } from "react";

const useOnScreen = (ref: React.MutableRefObject<Element | null>) => {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setIntersecting(entry.isIntersecting);
    });

    const currentElement = ref.current;
    if (currentElement) {
      observer.observe(currentElement);
    }

    // 清理函数：停止监听元素，防止内存泄漏
    return () => {
      if (currentElement) {
        observer.unobserve(currentElement);
      }
    };
  }, [ref]); // 添加ref作为依赖，确保ref变化时重新创建observer

  return isIntersecting;
};

export default useOnScreen;

关键修改说明 #

• Ref绑定修正：去掉.current，直接将carouselRef传给div的ref属性，React会自动将DOM元素赋值给carouselRef.current
• Hook依赖补充：在useEffect的依赖数组中加入ref，确保ref指向的元素变化时，重新初始化IntersectionObserver
• 类型明确化：将useRef的类型断言为HTMLDivElement，避免TypeScript类型推断异常
• 添加清理逻辑：为useEffect添加清理函数，停止对元素的监听，防止内存泄漏

内容的提问来源于stack exchange，提问作者Furkan Öztürk