如何使用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

关键是为引用分配类型： const el = useRef<HTMLDivElement>(null); 然后仔细检查：

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