IntersectionObserver与TypeScript和Next js一起使用Effect

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

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

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