javascript - 如何获取在 reactjs 中将 height css 属性设置为 auto 的元素的确切高度？

Question

我正在使用 Reactjs，我想获取 img 元素的高度，我想保持 img 的比例，所以我在 css 中像这样设置图像。

.img {
  position: fixed;
  z-index: 999;
  width: 30%;
  height: auto;
  left: 5%;
  object-fit: fill;
}

请注意这里的高度是“auto”。

现在我只是想像这样在 componentDidMount() 中获取它的渲染高度:

componentDidMount() {
    const height = document.getElementById('ImgID').clientHeight;
    const width = document.getElementById('ImgID').clientWidth;
    console.log(height, width)
}

我检查只是在控制台中打印结果，但日志显示高度为 0，宽度为 252(显式宽度)。

事实是图像出现在屏幕上并且它的高度在视觉上不为 0。然后我尝试通过打印手动检查属性“clientHeight”:

console.log(document.getElementById('ImgID').attributes)

通过展开“style > ownerElement > clientHeight”，我看到客户端高度为 49，这不是零，但我无法获得正确的值:/。

我正在寻找一种解决方案来获得这种情况下的高度，它可以通过 Javascript/css 或两者来实现。我尽量避免使用 JQuery，因为 React 使用的是虚拟 DOM，而不是浏览器 DOM。

----------------更新--------------------

这是我从 @ııı 的回答中得到的 getBoundingClientRect() 的结果

Answer 1

这实际上是因为componentDidMount()时图片还没有加载。执行。 <img>在 DOM 中，但是 height在图像加载之前是未知的(除非从 CSS 明确设置)。解决方法是在onLoad中查询高度.请参见下面的测试:

class Test extends React.Component {
  componentDidMount() {
    //console.log(this.refs.img.getBoundingClientRect().height);
    console.log('componentDidMount', this.refs.img.clientHeight);
  }
  imageLoaded = () => {
    console.log('imageLoaded', this.refs.img.clientHeight);
  }
  render() {
    return <img src="http://placekitten.com/200/200" 
                ref="img"
                onLoad={this.imageLoaded}
                />;
  }
}

ReactDOM.render(<Test />, document.getElementById('app'));

<script src="http://unpkg.com/react/umd/react.production.min.js"></script>
<script src="http://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<div id="app"></div>