React get свойства HTMLElement от ref к настраиваемому компоненту

Question

Получение свойств HTML от ссылки на элемент DOM довольно просто.

<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, также не помогает. Все, что я получаю, это объект с состояниями, реквизитами, ref и updater в качестве свойств, но специфические свойства DOM нигде не найдены.

Answer 1

Это потому, что он не отображается в DOM. Как вы можете получить свойства DOM для чего-то, что не отображается в DOM? Вам нужно будет получить ссылку на фактический элемент HTML, который отображается этим компонентом реакции, если вы хотите получить свойства DOM.

Я бы использовал элемент div или какой-либо элемент html в качестве элемента верхнего уровня в вашей функции рендеринга и получил ссылку на это.