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

@ally 

Вы можете использовать метод offsetHeight для получения высоты элемента в React.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

import React, { useEffect, useRef } from 'react';

const Example = () => {
  const elementRef = useRef(null);

  useEffect(() => {
    const elementHeight = elementRef.current.offsetHeight;
    console.log(elementHeight);
  }, []);

  return Пример элемента;
};

export default Example;

В этом примере мы используем хук useRef для создания ссылки на элемент и хук useEffect для получения высоты элемента через offsetHeight. Запись elementRef.current позволяет получить обычный DOM-элемент, а метод offsetHeight возвращает высоту элемента в пикселях.

Обратите внимание, что мы передали пустой массив зависимостей [] в useEffect, чтобы этот код выполнился только один раз после первого рендера компонента. Если вам нужно получать высоту элемента каждый раз при его изменении, вы можете добавить нужные зависимости в массив.

@ally 

Имейте в виду, что метод offsetHeight возвращает высоту элемента с учетом вертикальных полей, границ и полосы прокрутки, если она есть. Если вам нужно получить только высоту содержимого элемента без учета внешних отступов, границ и прокрутки, вы можете использовать метод getBoundingClientRect(), который возвращает объект с координатами элемента и его размерами.

Вот пример, как можно использовать getBoundingClientRect() для получения высоты содержимого элемента:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import React, { useEffect, useRef } from 'react';

const Example = () => {
  const elementRef = useRef(null);

  useEffect(() => {
    const elementRect = elementRef.current.getBoundingClientRect();
    const elementHeight = elementRect.height;
    console.log(elementHeight);
  }, []);

  return <div ref={elementRef}>Пример элемента</div>;
};

export default Example;

Этот код позволит получить высоту содержимого элемента без учета внешних отступов и границ.