React: Получить высоту элемента, и this.ref имеет пустой ток

Question

Как я могу получить высоту div внутри моего компонента? У меня есть следующий код:

constructor(...) {
  ...
  this.detailsRef = React.createRef();
}

render() {
  return (
    <div>
      <span>A title</span>
      <div ref={this.detailsRef}>Some details</div>
    </div>
  );
 }

Я прочитал, что вы можете получить высоту элемента, выполнив это:

this.detailsRef.current.clientHeight

или же

this.detailsRef.clientHeight

Однако это не работает для меня. У кого-нибудь есть предложения?

Ответ

Хорошо, причина, почему я не получил высоту от this.detailsRef.current.client потому что мой div с refприлагается к нему был div, созданный styled-components, Поэтому, когда я изменил свой div с styled-component на обычный div, это сработало.

Answer 1

Как это:

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.headerRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.headerRef.current.clientHeight);
  }

  render() {
    return (
      <div>
        <h1 ref={this.headerRef}>Grab this element</h1>
      </div>
    );
  }
}