在 ref.current.measure 回调中分配变量

Question

我在衡量我的观点的价值时遇到了问题。 我必须得到pageX 和pageY 的值。

一个组件看起来像：

  useEffect(() => {
    setTimeout(() => {
      updateElementPositions(index)
    })
  }, [])
....

 <StyledElement ref={elementRef[index]} style={style} index={index} type={type}> .....

更新元素位置是在上下文中声明的函数

 const updateElementPositions = (index: string) => {
    elementRef[index].current.measure((x: number, y: number, height: number, width: number, pageX: number, pageY: number) => {
      // HERE IS A PROBLEM
    })
  }

在此函数中，我想将 pageY 和 pageX 值分配给变量。问题是我有很多这样的组件（大约 300 个），我需要获取每个元素的尺寸。因此我不能使用 setState 或导致重新渲染的方法。我试图使用ref。

 elementRef[index].current.measure((x: number, y: number, height: number, width: number, pageX: number, pageY: number) => {
      element.current[index] = {pageX, pageY}
    })

但是我遇到了这个对我来说很奇怪的错误

Error

分配给“正常”变量也会导致错误TypeError: Attempted to assign to readonly property.

我想不出该怎么做。

如果有人能帮助我，我将不胜感激:)。

问候

Answer 1

elementRef[index].current 值当前是对 HTMLElement 的引用，因此您可能不应该改变它。我建议使用第二组参考来保存 pageX|Y 坐标值。通过索引设置特定 ref 的当前值。

elementRef[index].current.measure((x: number, y: number, height: number, width: number, pageX: number, pageY: number) => {
  pageXYRefs.current[index].current = { pageX, pageY }
});