javascript - 在 React 中如何通过 ref 获取组件的位置？

Question

我正在为我的应用程序使用 React 15.3.1。所以，我需要在它的父级中获取 Component x 和 y 位置。 child 被渲染成这样:

<Icon key={key} ref={(c) => this['icon' + key] = c}}/>;

这就是我尝试访问 Icon(基本上是一个 div)位置的方式:

let icon = this['icon' + this.state.currentIcon.id];
icon.getBoundingClientRect(); //Error: "getBoundingClientRect" is not a function

child 是正确的，我可以在调试器中看到它是 props。但是我看不到任何属性，例如 getBoundingClientRect、left、top 或任何其他位置属性。我需要做什么才能获得它们？

Answer 1

您的 ref 将引用 Icon，我猜它是一个 React 组件。在 getBoundingClientRect 方法可用之前，您需要解析实际的 React 元素(DOM 元素)。

您可以通过 ReactDOM.findDOMNode() 执行此操作功能。

let icon = this['icon' + this.state.currentIcon.id];
const domNode = ReactDOM.findDOMNode(icon);
domNode.getBoundingClientRect()