score: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


Related Query

More Query from same tag