Reagieren HTMLElement Eigenschaften von ref zu einer benutzerdefinierten Komponente

Question

Get HTML-Eigenschaften von einem Verweis auf ein DOM-Element ist ziemlich einfach.

<div ref={element => this.myDiv = element}> 
    <h1>Bla bla</h1> 
</div> 

... 

componentDidMount() => { 
    console.log(this.myDiv.clientHeight); // Gives desired result 
} 

Wie aber machen Sie das gleiche mit einem Verweis auf eine benutzerdefinierte Komponente?

<CustomElement ref={element => this.myDiv = element}> 
    <h1>Bla bla</h1> 
</CustomElement> 

... 

componentDidMount() => { 
    console.log(this.myDiv.clientHeight); // Undefined 
} 

Die Konsole, die das gesamte ref-Objekt protokolliert, ist ebenfalls nicht hilfreich. Alles, was ich davon abrufe, ist ein Objekt mit den Attributen state, props, ref und updater, aber die DOM-spezifischen Eigenschaften sind nirgendwo zu finden.

Answer 1

Das liegt daran, dass es nicht zum DOM gerendert wird. Wie können Sie DOM-Eigenschaften für etwas erhalten, das nicht für das DOM gerendert wird? Sie müssen einen Verweis auf ein tatsächliches HTML-Element erhalten, das von dieser Antwortkomponente gerendert wird, wenn Sie die DOM-Eigenschaften abrufen möchten.

Ich würde ein Div oder ein HTML-Element als Top-Level-Element in Ihrer Renderfunktion verwenden und einen Verweis darauf erhalten.