Estoy tratando de hacer un componente looper para poder hacer un bucle con cualquiera de sus elementos secundarios durante un período de tiempo específico. ¿Cómo puedo hacer eso?
// Looper function Looper({ children, array }) { return ( <div> {array.map((item) => ( <div key={item}>{children}</div> ))} </div> ); } // It works, but it needs a dummy array that I don't want. <Looper array={[1, 2, 3, 4, 5]}> <span>Hello Guys..</span> </Looper>Puede crear una matriz de números incrementales sobre la marcha usando [...Array(times).keys()] , así:
// Looper function Looper({ children, times }) { const keys = [...Array(times).keys()]; return ( <div> {keys.map((item) => ( <div key={item}>{children}</div> ))} </div> ); } <Looper times={5}> <span>Hello Guys..</span> </Looper>reemplace su función de mapa con un ciclo for y pase un conteo, es decir, la cantidad de veces que desea que se represente el looper, y use ese índice como una clave para los divs secundarios y luego introdúzcalos en una matriz. Finalmente, devuelva esa matriz de divs secundarios. Consulte este enlace si desea seguir este enfoque Bucle dentro de React JSX