Javascript JS获取既不包含GetElementById也不包含getBoundingClientRect的组件位置

如何在不使用GetElementById或getBoundingClientRect的情况下获取组件的位置

我使用react/JSX来渲染彼此内部的组件，我试图获得父级顶部和子级底部之间的距离，如果我使用该函数，我需要等待子级渲染，然后在父级上进行计算

这是我正在做的一个示例代码

export function TestPage() {
  return <BaseObject />;
}

function BaseObject() {
  return (
    <div
      className="popBox"
      style={{ top: "100px", left: "100px", width: "500px", height: "500px" }}
    >
      <div
        className="popBox2"
        style={{ top: "150px", left: "150px", width: "200px", height: "200px" }}
      ></div>
    </div>
  );
}

---

下面是一个使用

useLayoutEffect

和

useRef

钩子获取真实DOM元素的引用并查询它们的度量值的示例

函数BaseObject（）{
const ref1=React.useRef（）；
const ref2=React.useRef（）；
const[dump，setDump]=React.useState（“”）；
React.useLayoutEffect（（）=>{
常数el1=参考1。电流；
常数el2=参考2.电流；
如果（！（el1和el2））返回；
设置转储(
`${JSON.stringify（el1.getBoundingClientRect（））}\n${JSON.stringify（el2.getBoundingClientRect（））}`
);
});
返回(
{dump}
);
}
render（，document.getElementById（“根”））
.popBox{
背景色：#4F8989；
位置：粘性；
}
.popBox2{
背景色：#89694f；
位置：粘性；
}

为什么不能使用
getBoundingClientRect
？您可以在
div
s上放置React ref。如何将getBoundingClientRect与ref一起使用？你能详细说明你的评论吗？你是如何在你的rect代码中使用getBoundingClientRect的？这就决定了答案。这花了我一点时间，因为我一直在递归函数上呈现子组件，但是你的代码是一个非常好的基础，对我帮助很大，谢谢！
.popBox
{
    background-color: #4F8989;
    position: sticky;
}

.popBox2
{
    background-color: #89694f;
    position: sticky;
}