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

@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 элемента.

@lori_jast 

В дополнение к предыдущему ответу, стоит учесть, что для получения высоты элемента он должен уже существовать в DOM. Если вы пытаетесь получить высоту элемента, который еще не отрисован, то будет возвращено значение 0.

Если вам нужно получить высоту элемента во время его изменения или после перерисовки компонента, вы можете использовать метод componentDidUpdate. В этом случае вам необходимо сравнить предыдущую высоту элемента с текущей высотой, чтобы избежать бесконечного цикла перерисовки компонента.

Вот пример, демонстрирующий использование componentDidUpdate для получения высоты элемента:

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

class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); this.state = { height: 0 }; }

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

componentDidUpdate(prevProps, prevState) { if (prevState.height !== this.myRef.current.offsetHeight) { const height = this.myRef.current.offsetHeight; this.setState({ height }); } }

render() { return ( Это мой элемент, его высота: {this.state.height}px ); } }

В этом примере мы используем метод componentDidUpdate, чтобы обновить высоту элемента при его изменении. Мы сравниваем предыдущую высоту с текущей высотой, и если они отличаются, то обновляем состояние компонента. Затем мы отображаем текущую высоту элемента внутри компонента.

Помимо использования ссылок (ref), существуют также сторонние библиотеки, такие как react-measure или react-sizeme, которые облегчают получение размеров элементов в React.js.