ReactJS - Höhe eines Elements ermitteln

Wie kann ich die Höhe eines Elements ermitteln, nachdem React dieses Element gerendert hat?

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

ERGEBNIS

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

Es berechnet die Containerhöhe vor dem Rendern (36px). Ich möchte die Höhe nach dem Rendern erhalten. Das richtige Ergebnis sollte in diesem Fall 18px sein. jsfiddle

Sehen Sie diese Geige (tatsächlich aktualisiert Ihre)

Sie müssen sich einbinden, in componentDidMountdas nach der Rendermethode ausgeführt wird. Dort erhalten Sie die tatsächliche Höhe des Elements.

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>

Es folgt ein aktuelles ES6-Beispiel mit einer Referenz .

Denken Sie daran, dass wir eine React-Klassenkomponente verwenden müssen, da wir auf die Lifecycle-Methode zugreifen müssen, componentDidMount()da wir die Höhe eines Elements erst bestimmen können, nachdem es im DOM gerendert wurde.

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

Das laufende Beispiel finden Sie hier: https://codepen.io/bassgang/pen/povzjKw

Für diejenigen, die an der Verwendung interessiert sind react hooks, kann dies den Einstieg erleichtern.

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

Sie möchten auch Refs für das Element verwenden, anstatt es zu verwenden document.getElementById. Es ist nur eine etwas robustere Sache.

Meine 2020 (oder 2019) Antwort

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

nutzen Sie Ihre Fantasie lassen , was hier (WidgetHead) fehlt, reactstrapist etwas , das Sie auf npm finden: ersetzen innerRefmit refeinem Vermächtnis dom Element (sagen a <div>).

useEffect oder useLayoutEffect

Der letzte soll für Änderungen synchron sein

useLayoutEffect(oder useEffect) zweites Argument

Das zweite Argument ist ein Array und wird überprüft, bevor die Funktion im ersten Argument ausgeführt wird.

ich benutzte

[Ich selbst. Aktuell, Ich. Aktuell? Ich. Aktuell. Kunde Höhe: 0]

Da mir.current vor dem Rendern null ist und dies eine gute Sache ist, die nicht überprüft werden sollte, myself.current.clientHeightmöchte ich den zweiten Parameter am Ende auf Änderungen überprüfen.

was ich hier löse (oder zu lösen versuche)

Ich löse hier das Problem des Widgets in einem Raster, das seine Höhe nach eigenem Willen ändert, und das Rastersystem sollte elastisch genug sein , um zu reagieren ( https://github.com/STRML/react-grid-layout ).

Verwendung mit Haken:

Diese Antwort wäre hilfreich, wenn sich Ihre Inhaltsdimension nach dem Laden ändert.

onreadystatechange : Tritt auf, wenn sich der Ladezustand der Daten, die zu einem Element oder einem HTML-Dokument gehören, ändert. Das Ereignis onreadystatechange wird in einem HTML-Dokument ausgelöst, wenn sich der Ladezustand des Seiteninhalts geändert hat.

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

Ich habe versucht, mit einem eingebetteten YouTube-Videoplayer zu arbeiten, dessen Abmessungen sich nach dem Laden ändern können.

Ich fand nützliches npm-Paket https://www.npmjs.com/package/element-resize-detector

Ein optimierter browserübergreifender Listener für die Größenänderung von Elementen.

Kann mit React-Komponente oder Funktionskomponente verwendet werden (besonders nützlich für React-Hooks)

Hier ist ein weiteres, wenn Sie ein Ereignis zum Ändern der Fenstergröße benötigen:

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

Codestift

Eine alternative Lösung: Wenn Sie die Größe eines React-Elements synchron abrufen möchten, ohne das Element sichtbar rendern zu müssen, können Sie ReactDOMServer und DOMParser verwenden .

Ich verwende diese Funktion, um die Höhe eines Renderers für meine Listenelemente zu ermitteln, wenn ich das React -Fenster ( React-Virtualized ) verwende, anstatt die erforderliche itemSizeRequisite für eine FixedSizeList fest zu codieren .

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