reactjs - Hur kan jag undvika ett TypeScript-fel med React useRef?

När jag använder React Hooks stöter jag på ett TypeScript-fel när jag initierar en ref som null och sedan försöker komma åt den senare. Detta är ett nedkortat, illustrativt exempel:

  const el = useRef(null);

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

  return <div ref={el}></div>

@ts-ignore undertrycker felet Object is possibly 'null'. Är det möjligt att skriva detta utan att få felet?

Svar #1

Jag hittade svaret här: https://fettblog.eu/typescript-react/hooks/#useref

Nyckeln är att tilldela en typ till ref: const el=useRef<HTMLDivElement>(null); och sedan kontrollera noggrant:

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

Relaterade artiklar