如何在React中首次加载时获得offsetTop

Question

我想得到一个元素offsetTop。但它将是未定义的。

我怎样才能拿到它？我检查了mdn。https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

但我找不到怎么做。

import "./styles.css";
export default function App() {
const dividers = document.getElementsByClassName("divider");
const offsets = [
dividers[0]?.offsetTop,
dividers[1]?.offsetTop,
dividers[2]?.offsetTop,
dividers[3]?.offsetTop
];
console.log("dividers", dividers);
console.log("offsets", offsets);
return (
<>
<p style={{ height: 200 }}>aaaaaaaaa</p>
<div className="divider">
_______________________________________________
</div>
<p style={{ height: 200 }}>bbbbbbbbb</p>
<div className="divider">
_______________________________________________
</div>
<p style={{ height: 200 }}>cccccccccccc</p>
<div className="divider">
_______________________________________________
</div>
<p style={{ height: 200 }}>ddddddddd</p>
<div className="divider">
_______________________________________________
</div>
</>
);
}

这是Codesandbox。

Codesandbox

Answer 1

我使用了Array和fill来减少重复性，并能够动态设置ref的索引，而不是硬编码。代码沙盒

Answer 2

尝试这个

import { useLayoutEffect, useRef, useState } from "react";
import "./styles.css";
export default function App() {
const [offsets, setOffsets] = useState();
const ref = useRef();
useLayoutEffect(() => {
const dividers = document.getElementsByClassName("divider");
setOffsets(dividers);
}, []);
console.log(offsets);
return (
<>
{offsets && (
<>
<p style={{ height: 200 }}>aaaaaaaaa</p>
{offsets[0]}
<div ref={ref} className="divider">
_______________________________________________
</div>
<p style={{ height: 200 }}>bbbbbbbbb</p>
<div ref={ref} className="divider">
_______________________________________________
</div>
<p style={{ height: 200 }}>cccccccccccc</p>
<div ref={ref} className="divider">
_______________________________________________
</div>
<p style={{ height: 200 }}>ddddddddd</p>
<div ref={ref} className="divider">
_______________________________________________
</div>
</>
)}
</>
);
}