'clientHeight' not counting all element - React

Question

The DOM-tree rendered was

<Grid fluid ={true}>

      <Row>
          <NavigationBar 
           buttonClass='nav-button' 
           className='nav-bar'  
           />
      </Row>

      <section id={sectionList[0]}>
        <Row className='logo-row'>
          <Col className='logo-wrap' xs={3} sm={3} md={2}>
            {Logo}
          </Col>
          <Col xs={9} sm={9} md={10}>
            {ProgrammerName}
          </Col>
        </Row>
        {backgroundImg}
      </section>

 </Grid>

And I was trying to check the clientHeight of the <section> by using following method:

      const height = document.getElementById(sectionList[0]).clientHeight;

However, it seems that this call would only give out the height of the <Row> contained in the <section>, ignoring the {backgroundImg} expression, which itself called to render another <Row> component.

 <Row>
    <FullRowImage src={this.props.src} alt={this.props.alt} />
      <h2>
        <span>
          Some Text
        </span>
      </h2>
  </Row>

What might be the cause of this issue, that clientHeight counts only part of the <section> while leaving out the other?

Thanks.

Answer 1

So I finally figured this out. As <FullRowImage /> renders an <img> itself, the clientHeight is called before the <img> is loaded and this would leads to a zero height of <img> as well as <FullRowImage>.

In this case, method componentDidMount() would not be enough since a mounted component does not guarantee a loaded image. On the other hand, onLoad event will come in handy:

class FullRowImage extends React.Component {
   constructor(props){
   super(props);
   this.state = {
     loaded: false,
   };
   this.handleLoaded = this.handleLoaded.bind(this);
 }

handleLoaded(){
   console.log(document.getElementById('test').offsetHeight);
   this.setState(
   {loaded: true,}
   );
 }

 render(){
  return(
    <img id='test'  
     onLoad={this.handleLoaded} 
     src={this.props.src} 
     alt= {this.props.alt} />
    );
  }
}

And this will print the height of <img> after it is loaded.

Thanks to this article Detect when images have finished loading with React