Lo que estoy tratando de hacer es obtener una etiqueta HTML por className en HTML dinámico que busqué, pero devuelve indefinido. Funciona si trato de getElementByClassName ("página principal") porque esa clase no es dinámica
const HomePage = () => { const [pageData, setPageData] = useContext(PageContext) useEffect(() => { const allImages = document.getElementsByClassName("wp-block-column") console.log([...allImages]) }, []) //render fronpage const renderMainPage = () => { //map the data and check for the site url (www.siteurl.com = front page) if (pageData) { return pageData.map(page => { if (window.location.origin + "/" === page.link) { return <section dangerouslySetInnerHTML={{ __html: page.content.rendered }}></section> } }) } } return ( <h1 className="main-page"">{renderMainPage()}</h1> ) } export default HomePagePor lo que veo, el problema en pageData en contexto, probablemente su valor predeterminado para pageData del contexto es falso y renderMainPage () no va más allá de la primera declaración "if"
Pero no es preferible usar selectores de documentos, use refs en React en su lugar. También al nombrar, veo que está tratando de obtener imágenes y no nodos dom, pero con esta lógica obtendrá nodos dom. Estoy seguro de que hay una mejor manera/flujo para acceder a las imágenes que necesita que buscarlas en los nodos.
const elementsRef = useRef(data.map(() => createRef())); puede crear una referencia dinámica para acceder o crear una matriz iniNumber aleatoria y luego asignarle elementos cuando los seleccione
Puede usar esta función que useLayoutEffect, puede modificar su código de esta manera,
useLayoutEffect(()=> { document.getElementsByClassName("yourclassname") })