找不到 React HTML 元素引用宽度和高度

Question

在处理了一段时间的代码后，我似乎无法使用ReactcreateRef解决方案找到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();

Answer 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;

这将返回标记的当前宽度和高度。希望这对你很好。。