Wie kann ich die Position von Komponenten durch Ref in React erhalten?

Question

Ich verwende React 15.3.1 für meine App. Also, ich muss Component X- und Y-Positionen in seinem Elternteil bekommen. Das Kind wird wie folgt wiedergegeben:

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

Und das ist, wie ich versuche, Icon zuzugreifen (das ist im Grunde eine div) Position:

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

Das Kind richtig ist, kann ich sehen, es ist props in der Debugger. Aber ich kann keine Eigenschaften wie getBoundingClientRect, left, top oder irgendwelche anderen Positionsattribute sehen. Was muss ich tun, um sie zu bekommen?

Answer 1

Ihre ref bezieht sich auf Icon, die ich vermute, ist eine React-Komponente. Sie müssen das tatsächliche React-Element (DOM-Element) auflösen, bevor die getBoundingClientRect-Methode verfügbar ist. Sie können dies über die ReactDOM.findDOMNode()-Funktion tun.

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