[javascript] ReactJS-요소의 높이 가져 오기

Program / 글쓴이

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

결과

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

렌더링 전 컨테이너 높이 (36px)를 계산합니다. 렌더링 후 높이를 얻고 싶습니다. 이 경우 올바른 결과는 18px이어야합니다. jsfiddle

답변

참조 이 바이올린을 (실제로의 업데이트)

componentDidMountrender 메서드 이후에 실행되는 후크가 필요합니다 . 거기에서 요소의 실제 높이를 얻습니다.

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>

답변

다음은 ref 를 사용하는 최신 ES6 예제 입니다.

DOM에서 렌더링 된 요소의 높이 만 결정할 수 있으므로 Lifecycle 메서드에 액세스해야하므로 React 클래스 구성 요소 를 사용해야합니다 componentDidMount().

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

여기에서 실행 예제를 찾을 수 있습니다 : https://codepen.io/bassgang/pen/povzjKw

답변

을 사용하는 데 관심 react hooks이있는 사용자는 시작하는 데 도움이 될 수 있습니다.

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

답변

을 사용하는 대신 요소에 refs를 사용하고 싶을 수도 있습니다 document.getElementById. 이것은 약간 더 강력한 것입니다.

답변

내 2020 년 (또는 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>
    )
}

여기 (WidgetHead)없는 것을 위해 당신의 상상력을 사용하자, reactstrap교체 : 당신이 NPM에서 찾을 수있는 무언가 innerRef로 ref기존 DOM 요소에 대해 (A 말 <div>).

useEffect 또는 useLayoutEffect

마지막은 변경 사항에 대해 동 기적이라고합니다.

useLayoutEffect(또는 useEffect) 두 번째 인수

두 번째 인수는 배열이며 첫 번째 인수에서 함수를 실행하기 전에 확인됩니다.

나는 사용했다

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

myself.current는 렌더링 전에 null이고 확인하지 않는 것이 좋기 때문에 마지막에있는 두 번째 매개 변수는 myself.current.clientHeight변경 사항을 확인하려는 것입니다.

내가 여기서 해결하는 것 (또는 해결하려는 것)

나는 여기에서 자신의 의지로 높이를 변경하는 그리드의 위젯 문제를 해결하고 있으며 그리드 시스템은 반응 하기에 충분히 탄력적 이어야합니다 ( https://github.com/STRML/react-grid-layout ).

답변

후크와 함께 사용 :

이 답변은로드 후 콘텐츠 크기가 변경되는 경우 유용합니다.

onreadystatechange : 요소 또는 HTML 문서에 속한 데이터의로드 상태가 변경 될 때 발생합니다. onreadystatechange 이벤트는 페이지 콘텐츠의로드 상태가 변경되면 HTML 문서에서 시작됩니다.

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

로드 후 크기가 변경 될 수있는 유튜브 비디오 플레이어 임베딩으로 작업하려고했습니다.

답변

유용한 npm 패키지를 찾았습니다 https://www.npmjs.com/package/element-resize-detector

요소에 대한 최적화 된 브라우저 간 크기 조정 리스너.

React 컴포넌트 또는 기능 컴포넌트와 함께 사용할 수 있습니다 (특히 리 액트 후크에 유용함).