如何获得在reactjs中将高度css属性设置为自动的元素的确切高度？答案

【问题标题】：How do I get the exact height of an element which the height css attribute is set auto in reactjs?如何获得在reactjs中将高度css属性设置为自动的元素的确切高度？
【发布时间】：2019-07-12 02:58:27
【问题描述】：

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

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

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

现在我只是想像这样在 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() 得到的结果

【问题讨论】：

标签： javascript css reactjs sass

【解决方案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>

【讨论】：