ReactJS - Uzyskaj wysokość elementu

Jak mogę uzyskać wysokość elementu po wyrenderowaniu tego elementu przez React?

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

WYNIK

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

Oblicza wysokość kontenera przed renderowaniem (36px). Chcę uzyskać wysokość po renderowaniu. W tym przypadku prawidłowy wynik powinien wynosić 18 pikseli. jsfiddle

Zobacz te skrzypce (faktycznie zaktualizowałem twoje)

Musisz podłączyć się do componentDidMountktórego jest uruchamiany po metodzie renderowania. Tam otrzymasz aktualną wysokość elementu.

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>

Poniżej znajduje się aktualny przykład ES6 wykorzystujący ref .

Pamiętaj, że musimy użyć komponentu klasy React, ponieważ potrzebujemy dostępu do metody Lifecycle, componentDidMount()ponieważ możemy określić wysokość elementu dopiero po wyrenderowaniu go w 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'))

Przykład działania można znaleźć tutaj: https://codepen.io/bassgang/pen/povzjKw

Dla tych, którzy są zainteresowani użyciem react hooks, może to pomóc w rozpoczęciu.

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

Chciałbyś również użyć referencji na elemencie zamiast używać document.getElementById, jest to tylko trochę bardziej solidna rzecz.

Moja odpowiedź z 2020 (lub 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>
    )
}

niech wykorzystać swoją wyobraźnię do czego brakuje tutaj (WidgetHead), reactstrapjest czymś, co można znaleźć na KMP zamienić innerRefze refdla elementu dziedzictwo dom (powiedzmy <div>).

useEffect lub useLayoutEffect

Mówi się, że to ostatnie jest synchroniczne dla zmian

useLayoutEffect(lub useEffect) drugi argument

Drugi argument jest tablicą i jest sprawdzany przed wykonaniem funkcji w pierwszym argumencie.

użyłem

[yourself.current, yourself.current? yourself.current.clientHeight: 0]

Ponieważ self.current ma wartość null przed renderowaniem, a tego dobrze nie sprawdzać, drugi parametr na końcu myself.current.clientHeightjest tym, co chcę sprawdzić pod kątem zmian.

co tutaj rozwiązuję (lub próbuję rozwiązać)

Rozwiązuję tutaj problem widżetu na siatce, który z własnej woli zmienia swoją wysokość, a układ siatki powinien być na tyle elastyczny, aby zareagować ( https://github.com/STRML/react-grid-layout ).

Zamiast używać document.getElementById(...), lepszym (aktualnym) rozwiązaniem jest użycie zaczepu React useRef, który przechowuje odniesienie do komponentu / elementu, w połączeniu z punktem zaczepienia useEffect , który odpala przy renderowaniu składników.

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

Używanie z haczykami:

Ta odpowiedź byłaby pomocna, gdyby wymiar treści zmienił się po załadowaniu.

onreadystatechange : występuje, gdy stan ładowania danych należących do elementu lub dokumentu HTML ulegnie zmianie. Zdarzenie onreadystatechange jest wywoływane w dokumencie HTML, gdy zmienił się stan ładowania zawartości strony.

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

Próbowałem pracować z osadzaniem odtwarzacza wideo youtube, którego wymiary mogą się zmieniać po załadowaniu.

Znalazłem przydatny pakiet npm https://www.npmjs.com/package/element-resize-detector

Zoptymalizowany detektor zmiany rozmiaru elementów w różnych przeglądarkach.

Można go używać z komponentem React lub komponentem funkcjonalnym (szczególnie przydatne w przypadku haków reakcyjnych)

Oto kolejny, jeśli potrzebujesz zdarzenia zmiany rozmiaru okna:

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

kod pióra

Alternatywne rozwiązanie, w przypadku gdy chcesz pobrać rozmiar elementu React synchronicznie bez konieczności widocznego renderowania elementu, możesz użyć ReactDOMServer i DOMParser .

Używam tej funkcji, aby uzyskać wysokość renderera pozycji mojej listy podczas korzystania z okna reagowania ( zwirtualizowane reagowanie ), zamiast konieczności kodowania wymaganej właściwości itemSizedla 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
};