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

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

0 голосов
/ 19 февраля 2019

Как я могу получить высоту 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 на обычный div, он сработал.

1 Ответ

0 голосов
/ 19 февраля 2019

Как это: 

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>
    );
  }
}
...