如何在React中通过ref获得组件的位置？

Question

我在我的应用中使用React 15.3.1。所以，我需要在其中获得Component x和y位置。这个孩子是这样的：

<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

孩子是对的，我可以在调试器中看到它props。但我看不到getBoundingClientRect，left，top或任何其他位置属性等属性。我需要做些什么才能得到它们？

Answer 1

您的ref会引用Icon，我猜这是一个反应组件。您需要在getBoundingClientRect方法可用之前解析实际的React元素（DOM元素）。

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

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