typescript - IntersectionObserver in useEffect with TypeScript 和 Next js

Question

我正在尝试在 UseEffect 中使用 IntersectionObserver，它工作正常，但 TypeScript 抱怨 cachedRef。它说： 'HTMLDivElement | 类型的参数 null' 不可分配给 'Element' 类型的参数。

我已经看到了这个问题，但不知道如何将它应用到我的代码中。如果可能的话。

const StickyNav = ({ children, stuckClasses, unstuckClasses }: Props) => {
  const [stuck, setStuck] = useState(false)
  const ref = useRef<HTMLDivElement | null>(null)
  const classes = stuck ? stuckClasses : unstuckClasses

  useEffect(() => {
    const cachedRef = ref.current
    const observer = new IntersectionObserver(
      ([e]) => setStuck(e.intersectionRatio < 1),
      { threshold: [1], rootMargin: "-91px 0px 91px 0px" }
    )

    // const cachedRef: HTMLDivElement | null
    // Argument of type 'HTMLDivElement | null' is not assignable to parameter of type 'Element'.
    // Type 'null' is not assignable to type 'Element'.ts(2345)
    observer.observe(cachedRef)
    return () => observer.unobserve(cachedRef)
  }, [ref])

  return (
    <div ref={ref}>
      <Container>
        {children}
      </Container>
    </div>
  )
}

有任何想法吗？谢谢！

Answer 1

只需要检查 ref.current 是否存在于 useEffect 中。

useEffect(() => {
  if (!ref.current) return
  ...