Как получить высоту элемента в react.js?

Пользователь

от lori_jast , в категории: JavaScript , 7 месяцев назад

Как получить высоту элемента в react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от rodger.botsford , 7 месяцев назад

@lori_jast 

Для получения высоты элемента в React.js можно использовать метод offsetHeight у соответствующего DOM элемента.


Например, если у вас есть ссылка (ref) на элемент в вашем компоненте React, вы можете получить его высоту следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    const height = this.myRef.current.offsetHeight;
    console.log(height);
  }

  render() {
    return <div ref={this.myRef}>Это мой элемент</div>;
  }
}


В этом примере мы создаем ссылку (ref) на элемент div в методе render. Затем, после того как элемент был отрисован в DOM, мы можем получить его высоту в методе componentDidMount с помощью метода offsetHeight. В данном случае высота будет выведена в консоль.


Обратите внимание, что чтобы использовать ссылку на элемент, мы должны создать ее с помощью React.createRef(), а затем передать ее в свойство ref элемента.