getBoundingClientReact does not exist

Question

I have built a component that will determine its opening direction based on its dimension and position in the window. I used getBoundingClientRect() function on a react-dom node. Now i have updated some of project packages including react and react-dom to 16.3.2. Now I get a compile error:

Property 'getBoundingClientRect' does not exist on type 'Element | Text'

here is a piece of code that use this function:

const node = ReactDOM.findDOMNode(this.containerElement);

if (!node) {
  return;
}

let vertical: Vertical_Direction;
if (verticalDirection === Vertical_Direction.DOWN_UP) {
  const windowHeight = window.innerHeight;
  const height: number = Math.min(containerHeight, node.getBoundingClientRect().height);

Any help or suggestion to achieve this functionality will be appreciated.

Edit2: the cause of this problem is updating @types/react-dom to 16.0.5 version.

Answer 1

The getBoundingClientRect function only exists on the Element class, and not Text, so you'll need to cast the type of your element like so:

const node = ReactDOM.findDOMNode(this.containerElement) as Element

An alternative, safer route would be to check the instance type at runtime, and typescript will intelligently cast the type after the check. But as you can see, it might be a little unnecessarily verbose for this case:

const node = ReactDOM.findDOMNode(this.containerElement)

// ...

if (!(node instanceof Element)) return

// type of node should be Element

Either way, go with whatever you prefer.