how to get the dom's true height by reactjs? -

there reactjs component, need heigth of dom in component. failed, don't know wrong. code:

class imgcropper extends react.component {      constructor(props) {      super(props);      this.state = {        containsize: { width: 0, height: 0 },      };    }      componentdidmount() {      console.log('=================组件的宽高：', this.image.offsetwidth, this.image.offsetheight);      this.middle.style.width = `${this.contain.offsetwidth}px`;      this.middle.style.height = `${this.contain.offsetwidth}px`;      // 配置图片的宽高      this.image.style.transform = `translate(0px,${parseint((this.contain.offsetheight - this.image.height) / 2, 10)}px)`;    }      render() {      return (<div ref={((div) => { this.contain = div; })} classname={styles.container}>        <div id="cover-top" ref={(div) => { this.top = div; }} classname={styles.covertop}>          <a href="">            <input id="imagefile" name="image" type="file" accept="image/gif, image/jpeg, image/jpeg" />点击上传          </a>          <button >选择图片</button>          <input id="x" name="x" />          <input id="y" name="y" />          <input id="width" name="width" />          <input id="height" name="height" />        </div>        <div id="cover-middle" ref={(div) => { this.middle = div; }} classname={styles.covermiddle} />        <div id="cover-down" ref={(div) => { this.down = div; }} classname={styles.coverdown}>          <button type="button" >获得裁剪参数</button><span id="params">12121</span>        </div>        <img id="image" ref={(image) => { this.image = image; }} classname={styles.image} draggable="true" src={test} />      </div>      );    }

the console log show dom's height 0 always.

you forgot consider loading image time. @ time componentdidmount triggered, react component rendered, <img> element starts loading image given url. here need bind onload event of <img> function, , retrieve image size inside function.

sample code:

class imgcropper extends react.component {    constructor(props) {     super(props);     this.state = {       containsize: { width: 0, height: 0 },     };     this.onimageload = this.onimageload.bind(this);   }    onimageload() {     console.log('=================组件的宽高：', this.image.offsetwidth, this.image.offsetheight);     this.middle.style.width = `${this.contain.offsetwidth}px`;     this.middle.style.height = `${this.contain.offsetwidth}px`;     // 配置图片的宽高     this.image.style.transform = `translate(0px,${parseint((this.contain.offsetheight - this.image.height) / 2, 10)}px)`;   }    render() {     return (<div ref={((div) => { this.contain = div; })} classname={styles.container}>       <div id="cover-top" ref={(div) => { this.top = div; }} classname={styles.covertop}>         <a href="">           <input id="imagefile" name="image" type="file" accept="image/gif, image/jpeg, image/jpeg" />点击上传         </a>         <button >选择图片</button>         <input id="x" name="x" />         <input id="y" name="y" />         <input id="width" name="width" />         <input id="height" name="height" />       </div>       <div id="cover-middle" ref={(div) => { this.middle = div; }} classname={styles.covermiddle} />       <div id="cover-down" ref={(div) => { this.down = div; }} classname={styles.coverdown}>         <button type="button" >获得裁剪参数</button><span id="params">12121</span>       </div>       <img id="image" ref={(image) => { this.image = image; }} classname={styles.image} draggable="true" src={test} onload={this.onimageload} />     </div>     );   } }