Quiero obtener elementos offsetTop. Pero será indefinido.
¿Cómo puedo obtenerlo? Revisé mdn. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop
Pero no pude encontrar cómo hacerlo.
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> </> ); }Aquí está el Codesandbox.
prueba esto
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> </> )} </> ); }He usado Array and fill para hacerlo menos repetitivo y poder configurar los índices de referencia de forma dinámica en lugar de codificarlos. zona de pruebas de código