Reactでrefでコンポーネントの位置を取得するにはどうすればよいですか？

Question

私は自分のアプリにReact 15.3.1を使用しています。だから、私はそれの親のComponent xとyの位置を取得する必要があります。子供は次のようにレンダリングされます：

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

そして、これは私が位置（基本的にdivです）Iconにアクセスしようとする方法である：

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メソッドが利用可能になる前に、実際のリアクションエレメント（DOMエレメント）を解決する必要があります。

ReactDOM.findDOMNode()機能でこれを行うことができます。

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