reactjs - 在 componentDidMount 中获取错误的 ref clientHeight

Question

因此，当我尝试获取图像 div 的 clientheight 时，我会得到错误的值。相反，如果我为 imgdiv 设置高度，我会得到该值。

react :

constructor(props) {
        super(props);
        this.imgref = React.createRef();
      }

    componentDidMount(){
   
        console.log(this.centerref.current.clientHeight);
    
    }
    render(){
      return (
      <div className="wrapper">
      <div className="imgdiv" ref={this.imgref}><img src="" } /></div>
    </div>
    );
    }

CSS:

.wrapper{
        display: flex;
        flex-direction: column;
        flex: 1;
        height: 100%;
        }
        .imgdiv{
        flex: 0 0 auto;
        }
       .imgdiv img{
            width: 100%;
            height: 100%;
        }
 

Answer 1

这是因为您的图像需要一些时间来渲染，这就是为什么您没有获得实际图像大小而是容器的大小。

您可以像这样更新您的图片标签

<img
   src=""
   alt="hello"
   onLoad={this.onImageLoad}
 />

并创建一个onImageLoad处理程序

  onImageLoad = () => {
    console.log(this.imgref.current.clientHeight); // actual image size
  };

检查this codesand box