ReactJS - Obtener la altura de un elemento

¿Cómo puedo obtener la altura de un elemento después de que React renderice ese elemento?

HTML

<div id="container">
<!-- This element's 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')
);

RESULTADO

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

Está calculando la altura del contenedor antes del render (36px). Quiero obtener la altura después del render. El resultado correcto debería ser 18px en este caso. jsfiddle

Ver este violín (en realidad actualizó el suyo)

Debe conectarse al componentDidMountque se ejecuta después del método de renderizado. Allí, obtienes la altura real del elemento.

var DivSize = React.createClass({
    getInitialState() {
    return { state: 0 };
  },

  componentDidMount() {
    const height = document.getElementById('container').clientHeight;
    this.setState({ height });
  },

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

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

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

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

A continuación se muestra un ejemplo de ES6 actualizado utilizando una ref .

Recuerde que tenemos que usar un componente de la clase React ya que necesitamos acceder al método Lifecycle componentDidMount()porque solo podemos determinar la altura de un elemento después de que se representa en el 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'))

Puede encontrar el ejemplo de ejecución aquí: https://codepen.io/bassgang/pen/povzjKw

Para aquellos que estén interesados ​​en usar react hooks, esto podría ayudarlos a comenzar.

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

También querrá usar referencias en el elemento en lugar de usar document.getElementById, es algo un poco más robusto.

La respuesta de mi 2020 (o 2019)

import React, {Component, useRef, useLayoutEffect} from 'react';
import { useDispatch } from 'react-redux';
import { Toast, ToastBody, ToastHeader } from 'reactstrap';

import {WidgetHead} from './WidgetHead';

export const Widget = ({title, toggle, reload, children, width, name}) => {
    let myself = useRef(null);
    const dispatch = useDispatch();
    useLayoutEffect(()=>{
        if (myself.current) {
            const height = myself.current.clientHeight
            dispatch({type:'GRID_WIDGET_HEIGHT', widget:name, height})
        }
    }, [myself.current, myself.current?myself.current.clientHeight:0])

    return (
        <Toast innerRef={myself}>
            <WidgetHead title={title}
                toggle={toggle}
                reload={reload} />
            <ToastBody>
            {children}
            </ToastBody>
        </Toast>
    )
}

Use su imaginación para lo que falta aquí (WidgetHead), reactstrapes algo que puede encontrar en npm: reemplace innerRefcon refpara un elemento dom heredado (por ejemplo, a <div>).

useEffect o useLayoutEffect

Se dice que el último es sincrónico para los cambios.

useLayoutEffect(o useEffect) segundo argumento

El segundo argumento es una matriz y se verifica antes de ejecutar la función en el primer argumento.

solía

[yo mismo actual, yo mismo actual? yo mismo actual.clienteHeight: 0]

porque yo mismo.currente es nulo antes de renderizar, y es bueno no verificarlo, el segundo parámetro al final myself.current.clientHeightes lo que quiero verificar para ver si hay cambios.

lo que estoy resolviendo aquí (o tratando de resolver)

Estoy resolviendo aquí el problema del widget en una cuadrícula que cambia su altura por su propia voluntad, y el sistema de cuadrícula debe ser lo suficientemente elástico para reaccionar ( https://github.com/STRML/react-grid-layout ).

Utilizando con ganchos:

Esta respuesta sería útil si su dimensión de contenido cambia después de la carga.

onreadystatechange : ocurre cuando cambia el estado de carga de los datos que pertenecen a un elemento o documento HTML. El evento onreadystatechange se activa en un documento HTML cuando el estado de carga del contenido de la página ha cambiado.

import {useState, useEffect, useRef} from 'react';
const ref = useRef();
useEffect(() => {
    document.onreadystatechange = () => {
      console.log(ref.current.clientHeight);
    };
  }, []);

Estaba tratando de trabajar con una inserción de reproductor de video de YouTube cuyas dimensiones pueden cambiar después de la carga.

Encontré un paquete npm útil https://www.npmjs.com/package/element-resize-detector

Un oyente de cambio de tamaño de navegador optimizado para elementos.

Puede usarlo con el componente React o el componente funcional (especialmente útil para react hooks)

Aquí hay otro si necesita un evento de cambio de tamaño de ventana:

class DivSize extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      width: 0,
      height: 0
    }
    this.resizeHandler = this.resizeHandler.bind(this);
  }

  resizeHandler() {
    const width = this.divElement.clientWidth;
    const height = this.divElement.clientHeight;
    this.setState({ width, height });
  }

  componentDidMount() {
    this.resizeHandler();
    window.addEventListener('resize', this.resizeHandler);
  }

  componentWillUnmount(){
    window.removeEventListener('resize', this.resizeHandler);
  }

  render() {
    return (
      <div 
        className="test"
        ref={ (divElement) => { this.divElement = divElement } }
      >
        Size: widht: <b>{this.state.width}px</b>, height: <b>{this.state.height}px</b>
      </div>
    )
  }
}

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

bolígrafo de código

Una solución alternativa, en caso de que desee recuperar el tamaño de un elemento React de forma síncrona sin tener que representar visiblemente el elemento, puede usar ReactDOMServer y DOMParser .

Utilizo esta función para obtener la altura de un renderizador de elementos de mi lista cuando utilizo react-window ( react-virtualized ) en lugar de tener que codificar el itemSizeaccesorio requerido para FixedSizeList .

utilities.js:

/**
 * @description Common and reusable functions 
 * 
 * @requires react-dom/server
 * 
 * @public
 * @module
 * 
 */
import ReactDOMServer from "react-dom/server";

/**
 * @description Retrieve the width and/or heigh of a React element without rendering and committing the element to the DOM.
 * 
 * @param {object} elementJSX - The target React element written in JSX.
 * @return {object} 
 * @public
 * @function
 * 
 * @example
 * 
 * const { width, height } = getReactElementSize( <div style={{ width: "20px", height: "40px" }} ...props /> );
 * console.log(`W: ${width}, H: ${height});  // W: 20, H: 40
 * 
 */
const getReactElementSize = (elementJSX) => {

    const elementString = ReactDOMServer.renderToStaticMarkup(elementJSX);
    const elementDocument = new DOMParser().parseFromString(elementString, "text/html");
    const elementNode = elementDocument.getRootNode().body.firstChild;

    const container = document.createElement("div");
    const containerStyle = {

        display: "block",
        position: "absolute",
        boxSizing: "border-box",
        margin: "0",
        padding: "0",
        visibility: "hidden"
    };

    Object.assign(container.style, containerStyle);

    container.appendChild(elementNode);
    document.body.appendChild(container);

    const width = container.clientWidth;
    const height = container.clientHeight;

    container.removeChild(elementNode);
    document.body.removeChild(container);

    return {

        width,
        height
    };
};

/**
 * Export module
 * 
 */
export {

    getReactElementSize
};