ReactJS - Bir elemanın yüksekliğini al

React o öğeyi oluşturduktan sonra bir elemanın Yüksekliğini nasıl alabilirim?

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

SONUÇ

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

Oluşturmadan önce konteyner yüksekliğini hesaplıyor (36px). Renderden sonra yüksekliği almak istiyorum. Bu durumda doğru sonuç 18 piksel olmalıdır. jsfiddle

Bu kemanı görün (aslında sizinki güncellendi)

İçine Sen kanca gereken componentDidMountyöntem hale getirdikten sonra koşması. Orada, elementin gerçek yüksekliğini elde edersiniz.

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şağıda, ref kullanan güncel bir ES6 örneği verilmiştir .

Lifecycle yöntemine erişmemiz gerektiğinden bir React sınıfı bileşeni kullanmamız gerektiğini unutmayın componentDidMount()çünkü bir elementin yüksekliğini ancak DOM'da oluşturulduktan sonra belirleyebiliriz.

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

Çalışan örneği burada bulabilirsiniz: https://codepen.io/bassgang/pen/povzjKw

Kullanmak isteyenler için bu react hooks, başlamanıza yardımcı olabilir.

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

Ayrıca kullanmak yerine öğe üzerinde ref kullanmak istersiniz document.getElementById, bu sadece biraz daha sağlam bir şeydir.

2020'nin (veya 2019) cevabı

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

Burada eksik olan şey için hayal gücünüzü kullanın (WidgetHead), reactstrapnpm'de bulabileceğiniz bir şeydir: eski bir dom öğesi için innerRefile değiştirin ref(örneğin a <div>).

useEffect veya useLayoutEffect

Sonuncunun değişiklikler için senkronize olduğu söyleniyor

useLayoutEffect(veya useEffect) ikinci argüman

İkinci argüman bir dizidir ve ilk argümandaki fonksiyon çalıştırılmadan önce kontrol edilir.

kullandım

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

çünkü kendim.current, renderlemeden önce null ve bu kontrol etmemek için iyi bir şey, sondaki ikinci parametre myself.current.clientHeightdeğişiklikleri kontrol etmek istediğim şey.

burada çözdüğüm (veya çözmeye çalıştığım)

Burada kendi iradesiyle yüksekliğini değiştiren bir ızgarada widget sorununu çözüyorum ve ızgara sistemi tepki verecek kadar esnek olmalıdır ( https://github.com/STRML/react-grid-layout ).

Kullanmak yerine, document.getElementById(...)daha iyi (güncel) bir çözüm, bileşene / öğeye bir referansı depolayan React useRef kancasını kullanmaktır ve bu kancayı bir useEffect kancasıyla birleştirerek bileşen oluşturmalarında tetikler .

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

Kancalarla kullanım:

Yüklendikten sonra içerik boyutunuz değişirse bu yanıt yardımcı olacaktır.

onreadystatechange : Bir öğeye veya bir HTML belgesine ait olan verilerin yükleme durumu değiştiğinde gerçekleşir. Onreadystatechange olayı, sayfanın içeriğinin yükleme durumu değiştiğinde bir HTML belgesinde tetiklenir.

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

Yüklendikten sonra boyutları değişebilen bir youtube video oynatıcısı yerleştirerek çalışmaya çalışıyordum.

Yararlı npm paketi buldum https://www.npmjs.com/package/element-resize-detector

Öğeler için optimize edilmiş bir çapraz tarayıcı yeniden boyutlandırma dinleyicisi.

React bileşeni veya fonksiyonel bileşeni ile kullanılabilir (React kancaları için özellikle kullanışlıdır)

Pencere yeniden boyutlandırma olayına ihtiyacınız varsa bir tane daha:

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 kalemi

Alternatif bir çözüm, bir React öğesinin boyutunu eşzamanlı olarak, öğeyi görsel olarak oluşturmak zorunda kalmadan almak istemeniz durumunda, ReactDOMServer ve DOMParser'ı kullanabilirsiniz .

Kullanırken bir benim liste Oluşturucuya yüksekliğini almak için bu işlevi kullanın tepki-pencere ( -sanallaştırılmış tepki yerine gerekli kod olarak girme) itemSizebir için pervane 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
};