ReactJS - รับความสูงขององค์ประกอบ

ฉันจะได้รับความสูงขององค์ประกอบหลังจากที่ 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>

ตอบสนอง

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

ดูซอนี้ (ปรับปรุงจริงของคุณ)

คุณต้องเชื่อมต่อcomponentDidMountซึ่งรันหลังจากวิธีการแสดงผล คุณจะได้รับความสูงจริงขององค์ประกอบ

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>

ต่อไปนี้เป็นตัวอย่างถึงวัน ES6 ใช้โทษ

โปรดจำไว้ว่าเราต้องใช้องค์ประกอบคลาส Reactเนื่องจากเราจำเป็นต้องเข้าถึงเมธอด Lifecycle componentDidMount()เนื่องจากเราสามารถกำหนดความสูงขององค์ประกอบได้หลังจากแสดงผลใน 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'))

คุณสามารถดูตัวอย่างการทำงานได้ที่นี่: 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) อาร์กิวเมนต์ที่สอง

อาร์กิวเมนต์ที่สองคืออาร์เรย์และมีการตรวจสอบก่อนเรียกใช้ฟังก์ชันในอาร์กิวเมนต์แรก

ฉันใช้

[ตัวเองปัจจุบัน, ตัวเองปัจจุบัน? ตัวเอง.current.clientHeight: 0]

เนื่องจากตัวเองปัจจุบันเป็นโมฆะก่อนที่จะแสดงผลและนั่นเป็นสิ่งที่ดีที่จะไม่ตรวจสอบพารามิเตอร์ที่สองในตอนท้ายmyself.current.clientHeightคือสิ่งที่ฉันต้องการตรวจสอบการเปลี่ยนแปลง

สิ่งที่ฉันกำลังแก้อยู่ที่นี่ (หรือพยายามแก้)

ฉันกำลังแก้ปัญหาของวิดเจ็ตบนกริดที่เปลี่ยนความสูงตามความต้องการของตัวเองและระบบกริดควรยืดหยุ่นพอที่จะตอบสนอง ( https://github.com/STRML/react-grid-layout )

แทนที่จะใช้document.getElementById(...)วิธีแก้ปัญหาที่ดีกว่า (ล่าสุด) คือการใช้ React useRef hook ที่เก็บการอ้างอิงไปยัง component / element รวมกับuseEffect hook ซึ่งจะเริ่มทำงานที่การแสดงผลส่วนประกอบ

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

ใช้กับตะขอ:

คำตอบนี้จะเป็นประโยชน์หากมิติเนื้อหาของคุณเปลี่ยนไปหลังจากโหลด

onreadystatechange : เกิดขึ้นเมื่อสถานะการโหลดของข้อมูลที่เป็นขององค์ประกอบหรือเอกสาร HTML เปลี่ยนไป เหตุการณ์ onreadystatechange จะเริ่มทำงานบนเอกสาร HTML เมื่อสถานะการโหลดเนื้อหาของเพจเปลี่ยนไป

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

ฉันพยายามทำงานกับโปรแกรมเล่นวิดีโอ youtube ที่มีขนาดอาจเปลี่ยนแปลงหลังจากโหลด

ฉันพบแพ็คเกจ npm ที่มีประโยชน์https://www.npmjs.com/package/element-resize-detector

ตัวฟังการปรับขนาดข้ามเบราว์เซอร์ที่ได้รับการปรับให้เหมาะสมสำหรับองค์ประกอบ

สามารถใช้กับ React component หรือ functional component (มีประโยชน์เป็นพิเศษสำหรับ react hooks)

นี่คืออีกสิ่งหนึ่งหากคุณต้องการเหตุการณ์ปรับขนาดหน้าต่าง:

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

ปากการหัส

โซลูชันทางเลือกในกรณีที่คุณต้องการเรียกขนาดของ React องค์ประกอบพร้อมกันโดยไม่ต้องเห็นได้ชัดทำให้องค์ประกอบคุณสามารถใช้ReactDOMServerและDOMParser

ฉันจะใช้ฟังก์ชั่นนี้เพื่อให้ได้ความสูงของ renderer รายการของฉันเมื่อใช้ตอบสนองหน้าต่าง ( ตอบสนองเสมือนจริง ) แทนที่จะต้อง hardcode ที่จำเป็นต้องใช้itemSizeไม้ค้ำยันสำหรับFixedSizeList

ยูทิลิตี้ 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
};