如何在React和Typescript中使用useRef hook和getClientBoundingRect？

Question

所有人。

我需要在React上获取我的功能组件的大小。该项目正在使用Typescript，因此我需要输入函数和其他东西。我尝试使用useRef()这样的钩子：

function MyComponent (): JSX.Element {
  const targetREf = useRef<HTMLDivElement>() // I'm typing useRef like this.
  const [boxHeight, setBoxHeight] = useState()

  useLayoutEffect((): void => {
    setBoxHeight(targetRef.current && targetRef.current.getClientBoundingRect())
  }, [targetRef.current])
}

问题出在getClientBoundingRect()上。

打字稿说：Property 'getClientBoundingRect' does not exist on type 'HTMLDivElement'.

如何输入useRef()以使用getClientBoundingReact？

我正在使用React 16.8.6和Typescript 3.4.5。

谢谢！

Answer 1

我认为您拼错了函数名称。叫做：

getBoundingClientRect不是getClientBoundingReact。

希望这会有所帮助。