如何在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 ，我猜它是一個React組件。 在getBoundingClientRect方法可用之前，您需要解析實際的React Element（DOM元素）。

您可以通過ReactDOM.findDOMNode（）函數執行此操作。

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