React TS项目中useInView设置root时类型错误问题咨询

当然可以通过ref设置root参数，你当前的问题是直接传递了整个ref对象，而useInView的root参数需要的是Element | Document | null类型，不是MutableRefObject。

修正方法很简单：传递ref.current而不是ref本身，同时给useRef加上明确的泛型约束，让TypeScript准确推断类型：

// 给useRef添加泛型，指定存储的是Element或null
const root = useRef<Element | null>(null);

const { ref, inView, entry } = useInView({
     // 传递ref.current，而不是ref对象
     root: root.current,
     threshold: 0,
     onChange: () => console.log(inView)
});

补充说明 #

• useRef返回的是一个包裹着值的对象（MutableRefObject），真正的DOM元素存在它的current属性里，所以必须传这个属性才符合root参数的类型要求。
• 初始时root.current是null，这完全没问题——当root为null时，Intersection Observer会默认使用浏览器视口作为根容器。

内容的提问来源于stack exchange，提问作者Bufer