Javascript 我可以在设置ref之前解析道具吗？ import React，{useLayoutEffect}来自“React”； 从“@chakra ui/react”导入{Box}”； 从“./hooks”导入{useBoundingRect}； 导出默认函数项（{children，setItemPosition，itemWidth，gap}）{ 常量[ref，{x}]=useBundingRect（）； 使用LayoutEffect（（）=>setItemPosition（Math.round（x）），[x]）； 返回( {儿童} ); }

上面的组件由父组件映射。它水平放置在我正在建造的旋转木马中

ref

被分配给dom元素，钩子（钩子见下文）附加一个调整大小事件侦听器以使用

.getBoundingClientRect（）

返回

元素
x
位置值

然后将
x
值传递到
setItemPosition（）
中的父状态，该状态已在props中传递

其次，
itemWidth
以道具形式传递给DOM元素，并赋予其宽度。这发生在已计算
x
值之后，这意味着
x
位置已过期，并记录了一个值减去转盘中上一个元素的宽度

在分配DOM元素的宽度后，如何记录
x
值

我试过：
•尝试使用
useLayoutEffect
分配宽度，然后使用
useffect
传递
x
位置，但无效

•反转计算
itemWidth
的方式，而不是在父级中计算并向下传递，而是仅从父级传递用于计算的值，并在子级中进行计算并向上传递

钩子
从“react”导入{useState，useCallback，useLayoutEffect}；
从“./utils”导入{debounce}；
函数getDimensionObject（节点）{
const rect=node.getBoundingClientRect（）；
返回{
宽度：rect.width，
高度：垂直高度，
top:rect.top，
左：rect.left，
x:rect.x，
y:rect.y，
右：右，右，
底部：rect.bottom
};
}
导出默认函数useBoundingRect（限制）{
const[dimensions，setDimensions]=useState（{}）；
const[node，setNode]=useState（null）；
const ref=useCallback（（节点）=>setNode（节点），[]）；
useLayoutEffect（（）=>{
如果（“未定义”！==窗口和节点的类型）{
常量度量=（）=>
window.requestAnimationFrame（（）=>
setDimensions（getDimensionObject（节点））
);
度量（）；
常数侦听器=去盎司（极限？极限：250，测量）；
addEventListener（“调整大小”，侦听器）；
addEventListener（“滚动”，listener）；
return（）=>{
removeEventListener（“调整大小”，侦听器）；
removeEventListener（“滚动”，listener）；
};
}
}，[node，limit]）；
返回[参考，尺寸，节点]；
}
你不能将
setItemPosition
作为参数传递给
useBoundingRect
，然后在调用setDimensions时调用它吗？我原以为我知道你的意思，但在尝试时，我只会导致无限渲染循环。如果你有时间，你能详细说明一下吗？