找不到 React HTML 元素参考宽度和高度答案

【问题标题】：Can't find React HTML elements reference width and height找不到 React HTML 元素参考宽度和高度
【发布时间】：2019-11-12 10:47:02
【问题描述】：

在弄乱我的代码一段时间后，我似乎无法使用 React createRef 解决方案找到 HTML 元素的宽度。下面你可以看到构造函数以及我是如何初始化引用的。

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

在此之后，我正在创建我想要跟踪其大小的对象的引用。

<tr>
    <th ref={this.elementToTrack} className="upperHeader">Location</th>
</tr>

此时，如果我要控制 ref，它会显示 React 元素/DOM 元素，我不完全确定。但由此，我不确定我应该如何访问其当前的大小属性。

我尝试了以下建议，但没有成功：

this.elementToTrack.current.offsetWidth;
this.elementToTrack.current.width;
this.elementToTrack.getBoundingClientRect();

【问题讨论】：

应该是getComputedStyle(this.elementToTrack.current).width（如果你没有硬编码宽度，你需要这样做）。此外，一旦您执行 console.log(this.elementToTrack.current) 并获取元素，这将不再是一个 React 问题。
看起来这确实奏效了我用它做了一些愚蠢的事情，但现在它在正确的元素上它可以找到值。
在这种情况下应该是this.elementToTrack.current.getBoundingClientRect().width

标签： javascript html reactjs reference

【解决方案1】：

您可以使用简单的 javascript 的 .offsetWidth 和 .offsetHeight 属性，而不是使用 refs。像这样为您的th 赋予 id 属性：

<tr>
    <th ref={this.elementToTrack} id="sampleID" className="upperHeader">Location</th>
</tr>


var width = document.getElementById('sampleID').offsetWidth;
var height = document.getElementById('sampleID').offsetHeight;

这将返回标签的当前宽度和高度。希望对你有好处..

【讨论】：