reactjsでdomの本当の高さを取得する方法は？

Question

reactjsコンポーネントがあります。コンポーネントのdomの高さを取得する必要があります。しかし、私は失敗した、私は間違っているか分からない。これは私のコードです：

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

コンソールログは、DOMの高さが常に0であることを示しています。

Answer 1

イメージ時間を読み込むことを忘れました。 componentDidMountがトリガーされると、Reactコンポーネントがレンダリングされましたが、<img>要素は指定されたURLからのイメージのロードを開始します。ここでは、onLoadイベントを<img>にバインドし、その関数内のイメージサイズを取得する必要があります。

サンプルコード：

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