ReactJS - Obtenir la hauteur d'un élément

Comment puis-je obtenir la hauteur d'un élément après que React a rendu cet élément?

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

RÉSULTAT

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

Il calcule la hauteur du conteneur avant le rendu (36px). Je veux obtenir la hauteur après le rendu. Le bon résultat devrait être 18px dans ce cas. jsfiddle

Voir ce violon (en fait mis à jour le vôtre)

Vous devez vous connecter à componentDidMountlaquelle est exécutée après la méthode de rendu. Là, vous obtenez la hauteur réelle de l'élément.

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>

Voici un exemple ES6 à jour utilisant une réf .

N'oubliez pas que nous devons utiliser un composant de classe React car nous devons accéder à la méthode Lifecycle componentDidMount()car nous ne pouvons déterminer la hauteur d'un élément qu'après son rendu dans le 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'))

Vous pouvez trouver l'exemple en cours ici: https://codepen.io/bassgang/pen/povzjKw

Pour ceux qui sont intéressés à utiliser react hooks, cela pourrait vous aider à démarrer.

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

Vous voudrez également utiliser des références sur l'élément au lieu d'utiliser document.getElementById, c'est juste une chose légèrement plus robuste.

Ma réponse de 2020 (ou 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>
    )
}

laissez utiliser votre imagination pour ce qui manque ici (WidgetHead), reactstrapest quelque chose que vous pouvez trouver sur npm: remplacez innerRefpar refun élément dom hérité (disons a <div>).

useEffect ou useLayoutEffect

Le dernier est dit synchrone pour les changements

useLayoutEffect(ou useEffect) deuxième argument

Le deuxième argument est un tableau et il est vérifié avant d'exécuter la fonction dans le premier argument.

j'ai utilisé

[moi-même.current, moi-même.current? moi-même.current.clientHeight: 0]

car moi-même.current est nul avant le rendu, et c'est une bonne chose de ne pas vérifier, le deuxième paramètre à la fin myself.current.clientHeightest ce que je veux vérifier pour les changements.

ce que je résous ici (ou essaie de résoudre)

Je résous ici le problème du widget sur une grille qui change sa hauteur de sa propre volonté, et le système de grille doit être suffisamment élastique pour réagir ( https://github.com/STRML/react-grid-layout ).

Utilisation avec des crochets:

Cette réponse serait utile si votre dimension de contenu change après le chargement.

onreadystatechange : se produit lorsque l'état de chargement des données appartenant à un élément ou à un document HTML change. L'événement onreadystatechange est déclenché sur un document HTML lorsque l'état de chargement du contenu de la page a changé.

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

J'essayais de travailler avec un lecteur vidéo YouTube intégré dont les dimensions peuvent changer après le chargement.

Au lieu d'utiliser document.getElementById(...), une meilleure solution (à jour) consiste à utiliser le hook React useRef qui stocke une référence au composant / élément, combiné avec un hook useEffect , qui se déclenche aux rendus de composant.

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

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

  useEffect(() => {
    setHeight(ref.current.clientHeight);
  }, []); //empty dependency array so it only runs once at render

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

J'ai trouvé le package npm utile https://www.npmjs.com/package/element-resize-detector

Un écouteur optimisé pour redimensionner les éléments dans plusieurs navigateurs.

Peut l'utiliser avec un composant React ou un composant fonctionnel (particulièrement utile pour les hooks de réaction)

En voici un autre si vous avez besoin d'un événement de redimensionnement de la fenêtre:

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

code stylo

Une solution alternative, au cas où vous voudriez récupérer la taille d'un élément React de manière synchrone sans avoir à rendre visiblement l'élément, vous pouvez utiliser ReactDOMServer et DOMParser .

J'utilise cette fonction pour obtenir la hauteur d'un rendu d'élément de ma liste lors de l'utilisation de react-window ( react-virtualized ) au lieu d'avoir à coder en dur l' itemSizeaccessoire requis pour 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
};