如何避免 React useRef 的 TypeScript 错误?

Question

使用 React Hooks，当我将 ref 初始化为 null 时，我遇到了 TypeScript 错误，然后尝试稍后访问它。这是一个精简的说明性示例：

const el = useRef(null);
useEffect(() => {
if (el.current !== null) {
//@ts-ignore
const { top, width } = el.current.getBoundingClientRect();
}
}, []);
return <div ref={el}></div>

@ts-ignore禁止显示错误Object is possibly 'null'.是否可以在不出现错误的情况下编写此内容？

Answer 1

我在这里找到了答案：https://fettblog.eu/typescript-react/hooks/#useref

关键是给 ref 分配一个类型：const el = useRef<HTMLDivElement>(null);然后仔细检查：

if (el && el.current){
const { top, width } = el.current.getBoundingClientRect();
}