如何使用 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();
}