ReactJS get rendered component height

Question

I\'m attempting to integrate or create a React version of https://github.com/kumailht/gridforms, to do so I need to normalize the height of the columns inside of the row. Th

Answer 1

Above solutions are good. I thought I'd add my own that helped me solve this issue + others discussed in this question.

Since as others have said a timeout function is unpredictable and inline css with javascript variable dependencies (ex. style={{height: `calc(100vh - ${this.props.navHeight}px)`}}) can alter the height of elements after the componentDidMount method, there must be an update after all of the elements and inline javascript-computed css is executed.

I wasn't able to find very good information on which elements accept the onLoad attribute in React, but I knew the img element did. So I simply loaded a hidden image element at the bottom of my react component. I used the onLoad to update the heights of referenced components elsewhere to yield the correct results. I hope this helps someone else.

_setsectionheights = () => {
    this.setState({
      sectionHeights: [
        this.first.clientHeight,
        this.second.clientHeight,
        this.third.clientHeight,
      ]
    });
}

render() {
    return (
        <>
            <section
            ref={ (elem) => { this.first = elem } }
            style={{height: `calc(100vh - ${this.props.navHeight}px)`}}
            >
                ...
            </section>
            ...
            <img style={{display: "none"}} src={..} onLoad={this._setsectionheights}/>
        </>
    );
}

For the sake of being thorough, the issue is that when the componentDidMount method is executed, it only considers external css (speculation here). Therefore, my section elements (which are set to min-height: 400px in external css) each returned 400 when referenced with the clientHeight value. The img simply updates the section heights in the state once everything before it has loaded.

Answer 2

A bit late with the answer but technically you can get element hight this way:

var node = ReactDOM.findDOMNode(this.refs[ref-name]);
if (node){
  var calculatedHeight = node.clientHeight;
}

Answer 3

Here is an example of using refs and clientWidth/clientHeight:

import React, { Component } from 'react';
import MyImageSrc from './../some-random-image.jpg'

class MyRandomImage extends Component {
  componentDidMount(){
    let { clientHeight, clientWidth } = this.refs.myImgContainer;
    console.log(clientHeight, clientWidth);
  }
  render() {
    return (
      <div ref="myImgContainer">
        <img src={MyImageSrc} alt="MyClickable" />
      </div>
    );
  }
}

export default MyRandomImage;

Note: this appears to work for width reliably, but not height. Will edit if I find a fix...