getBoundingClientRect 不存在

Posted 2023-03-31

【中文标题】getBoundingClientRect 不存在

【英文标题】：getBoundingClientReact does not exist

【发布时间】：2018-04-28 05:58:47

【问题描述】：

我已经构建了一个组件，它将根据它在窗口中的尺寸和位置来确定它的打开方向。我在 react-dom 节点上使用了 getBoundingClientRect() 函数。现在我已经更新了一些项目包，包括 react 和 react-dom 到 16.3.2。现在我得到一个编译错误：

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

下面是一段使用这个函数的代码：

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);

对于实现此功能的任何帮助或建议将不胜感激。

Edit2：此问题的原因是将@types/react-dom 更新到 16.0.5 版本。

【参考方案1】：

getBoundingClientRect 函数仅存在于 Element 类中，而不存在于 Text，因此您需要像这样转换元素的类型：

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

另一种更安全的方法是在运行时检查实例类型，打字稿将在检查后智能地转换类型。但正如您所看到的，对于这种情况，它可能有点不必要的冗长：

const node = ReactDOM.findDOMNode(this.containerElement)

// ...

if (!(node instanceof Element)) return

// type of node should be Element

不管怎样，随心所欲。

【讨论】：

谢谢。有效。我想知道为什么他们在这个版本中改变了这一点。 @kingdaro

当然 :) 并且可能是为了正确，因为如果组件从其渲染方法返回一个字符串，您将返回一个文本节点，正如新类型所暗示的那样