refからHTMLElementのプロパティをカスタムコンポーネントに返す

Question

refからDOM要素へのHTMLプロパティの取得はかなり簡単です。

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

... 

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

ただし、カスタムコンポーネントのリファレンスを使用して同じことを行うにはどうすればよいですか。

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

... 

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

refオブジェクト全体をコンソールに記録することは役に立ちません。私が取得したのは、state、props、ref、およびupdaterをプロパティとして持つオブジェクトですが、DOM固有のプロパティは見つかりません。

Answer 1

これはDOMにレンダリングされないためです。 DOMにレンダリングされないものでDOMプロパティを取得するにはどうすればよいですか？ DOMプロパティを取得する場合は、その反応コンポーネントによってレンダリングされる実際のHTML要素を参照する必要があります。

レンダー機能のトップレベル要素としてdivまたはhtml要素を使用して、それを参考にします。