ReactJS - Ottieni l'altezza di un elemento

Come posso ottenere l'altezza di un elemento dopo che React ha renderizzato quell'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')
);

RISULTATO

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

Sta calcolando l'altezza del contenitore prima del rendering (36px). Voglio ottenere l'altezza dopo il rendering. Il risultato corretto dovrebbe essere 18px in questo caso. jsfiddle

Guarda questo violino (effettivamente aggiornato il tuo)

È necessario agganciarsi a componentDidMountcui viene eseguito dopo il metodo di rendering. Lì, ottieni l'altezza effettiva dell'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>

Di seguito è riportato un esempio ES6 aggiornato utilizzando un rif .

Ricorda che dobbiamo usare un componente di classe React poiché dobbiamo accedere al metodo Lifecycle componentDidMount()perché possiamo determinare l'altezza di un elemento solo dopo che è stato renderizzato nel 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'))

Puoi trovare l'esempio in esecuzione qui: https://codepen.io/bassgang/pen/povzjKw

Per coloro che sono interessati all'uso react hooks, questo potrebbe aiutarti a iniziare.

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

Vorresti anche usare ref sull'elemento invece di usarlo document.getElementById, è solo una cosa leggermente più robusta.

La mia risposta del 2020 (o del 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>
    )
}

usa la tua immaginazione per ciò che manca qui (WidgetHead), reactstrapè qualcosa che puoi trovare su npm: sostituisci innerRefcon refun elemento dom legacy (ad esempio a <div>).

useEffect o useLayoutEffect

Si dice che l'ultimo sia sincrono per i cambiamenti

useLayoutEffect(o useEffect) secondo argomento

Il secondo argomento è un array e viene verificato prima di eseguire la funzione nel primo argomento.

ero solito

[me stesso.current, me stesso.corrente? me stesso.current.clientHeight: 0]

poiché me stesso.current è nullo prima del rendering, ed è una buona cosa non controllare, il secondo parametro alla fine myself.current.clientHeightè quello che voglio controllare per le modifiche.

cosa sto risolvendo qui (o cercando di risolvere)

Sto risolvendo qui il problema del widget su una griglia che cambia la sua altezza per propria volontà e il sistema della griglia dovrebbe essere abbastanza elastico per reagire ( https://github.com/STRML/react-grid-layout ).

Utilizzo con ganci:

Questa risposta sarebbe utile se la dimensione del contenuto cambia dopo il caricamento.

onreadystatechange : si verifica quando lo stato di caricamento dei dati che appartengono a un elemento o un documento HTML cambia. L'evento onreadystatechange viene generato su un documento HTML quando lo stato di caricamento del contenuto della pagina è cambiato.

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

Stavo cercando di lavorare con l'incorporamento di un lettore video di YouTube le cui dimensioni potrebbero cambiare dopo il caricamento.

Ho trovato utile il pacchetto npm https://www.npmjs.com/package/element-resize-detector

Un listener di ridimensionamento cross-browser ottimizzato per gli elementi.

Può usarlo con il componente React o il componente funzionale (particolarmente utile per gli hook reattivi)

Eccone un altro se hai bisogno di un evento di ridimensionamento della finestra:

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

penna a codice

Una soluzione alternativa, nel caso in cui desideri recuperare la dimensione di un elemento React in modo sincrono senza dover renderizzare visibilmente l'elemento, puoi usare ReactDOMServer e DOMParser .

Uso questa funzione per ottenere l'altezza di un renderer di elementi della mia lista quando si usa la finestra di reazione ( virtuale-reattiva ) invece di dover codificare come hardcoded il itemSizepuntello richiesto per un 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
};