在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}
})

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

错误

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

我想不出该怎么做了。

如果有人能帮助我，我将不胜感激：(。

问候

Answer 1

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

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