ReactJS - получить высоту элемента

Как получить высоту элемента после рендеринга этого элемента в React?

HTML

<div id="container">
<!-- This element contents will be replaced with your component. -->
<p>
jnknwqkjnkj<br>
jhiwhiw (this is 36px height)
</p>
</div>

ReactJS

var DivSize = React.createClass({

  render: function() {
    let elHeight = document.getElementById('container').clientHeight
    return <div className="test">Size: <b>{elHeight}px</b> but it should be 18px after the render</div>;
  }
});

ReactDOM.render(
  <DivSize />,
  document.getElementById('container')
);

РЕЗУЛЬТАТ

Size: 36px but it should be 18px after the render

Он вычисляет высоту контейнера до рендера (36 пикселей). Я хочу получить высоту после рендера. В этом случае правильный результат должен быть 18px. jsfiddle

Ответы

Ответ 1

Смотрите этот скрипт (фактически обновленный)

Вам нужно подключиться к componentDidMount, который запускается после метода render. Там вы получаете фактическую высоту элемента.

Ответ 2

Ниже приведен пример ES6 с использованием ref.

Помните, что мы должны использовать React class component, так как нам нужно получить доступ к методу Lifecycle componentDidMount(), потому что мы можем определить высоту элемента после его отображения в DOM.

import React, {Component} from 'react'
import {render} from 'react-dom'

class DivSize extends Component {

  constructor(props) {
    super(props)

    this.state = {
      height: 0
    }
  }

  componentDidMount() {
    const height = this.divElement.clientHeight;
    this.setState({ height });
  }

  render() {
    return (
      <div 
        className="test"
        ref={ (divElement) => this.divElement = divElement}
      >
        Size: <b>{this.state.height}px</b> but it should be 18px after the render
      </div>
    )
  }
}

render(<DivSize />, document.querySelector('#container'))

Здесь вы можете найти пример выполнения: https://www.webpackbin.com/bins/-KkP1HhC_tW4FeoYSuDe

Ответ 3

Для тех, кто заинтересован в использовании react hooks, это может помочь вам начать.

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

export default () => {
  const [height, setHeight] = useState(0)
  const ref = useRef(null)

  useEffect(() => {
    setHeight(ref.current.clientHeight)
  })

  return (
    <div ref={ref}>
      {height}
    </div>
  )
}

Ответ 4

Вы также хотели бы использовать refs для элемента вместо использования document.getElementById, это всего лишь несколько более надежная вещь.

Ответ 5

Я нашел полезный пакет npm https://www.npmjs.com/package/element-resize-detector

Оптимизированный кросс-браузерный слушатель изменения размера для элементов.

Можно использовать с компонентом React или функциональным компонентом (особенно полезно для реакционных хуков)