Tengo una matriz songKey como ESTADO. Sus datos se rellenan desde la API. Estoy renderizando JSX usando estos datos de matriz. Me gusta agregar useRef para referir elementos del JSX. ¿Es posible agregar ganchos useRef a través del código automáticamente? o debo usar la función document.getElementById() para referir elementos?
const [songKey, songKeyController] = useState([]); ... ... ... ... ... const renderLyrics = () => { let lyrics = []; if (songKey) { lyrics = songKey.map((key) => ( <div key={key} className={`lyrics_container ${key}`}> <div className="lyrics_data tamil-font"> {props.currentSong.Data[key]} </div> </div> )); } return lyrics; };No recomiendo usar elementos dom directamente en React, pero si lo está usando de todos modos, puede hacerlo de manera
use useRef en el elemento principal, luego simplemente use querySelectorAll y luego use childs con el valor de índice de esa matriz para acceder a ellos directamente
ver el ejemplo
principal.jsx
import React, { useEffect, useRef, useState } from "react"; export default function Main() { const EL = useRef(null); const [data, setData] = useState(["First", "Second", "Third", "Fourth"]); useEffect(() => { const childs = EL.current.querySelectorAll(".child"); // fun demo let index = 0; setInterval(() => { const curr = childs[index % childs.length]; childs.forEach((each) => (each.style.background = "")); curr.style.background = "red"; console.log(curr); index++; }, 1000); // fun demo }, [data]); return ( <div className="root" ref={EL}> {data.map((each, i) => { return ( <div className="child" key={i}> {each} </div> ); })} </div> ); }