Question

我正在React中开发一个数值滑块组件。它实际上现在可以正常工作，并且功能齐全，但是只有一个问题。我通过CSS设置了拇指和总滑块的宽度，我喜欢这样做，因为它很灵活。

计算时还需要滑块和拇指的宽度，例如计算滑块的最大位置或拇指相对于绝对位置的位置。

所以，我有这样的功能：

getSliderWidth = () => {
  return this.sliderRef.current ? this.sliderRef.current.offsetWidth : 0;
}

getThumbWidth = () => {
  return this.sliderThumbRef.current ? this.sliderThumbRef.current.clientWidth : 0;
}

在ref函数中定义引用的地方如下：

<div ref={this.sliderRef} className="slider-range">
  <div className="slider-range-connect" style={connectStyle}></div>
  <div ref={this.sliderThumbRef} className="slider-range-thumb" style={thumbStyle}></div>
</div>

但是，问题是宽度仅在第一次渲染后才知道。在第一次渲染之前，引用不可用。因此，我认为我需要做的是强制重新渲染，以便在最初加载组件时，会再次渲染一次。这是因为初始渲染功能需要知道相对的最大位置和拇指位置才能渲染初始元素。

那么，有没有一种“反应”方式来执行此操作，或者我缺少什么？在这里，理想的解决方案是否是具有某种布尔标志，并在初始安装函数中检查此标志，如果它是第一个渲染，则进行另一个渲染，然后设置该标志？这似乎不太“反应”，所以我想知道是否还有更优雅的东西。

强制单个重新渲染来测量DOM元素？

0 个答案: