Quiero hacer una animación de texto que anime cada hechizo.
La fuente de datos de la animación proviene de un Array.
La animación se activa en función de la clave (en React y también en el movimiento del enmarcador)
y sabemos lo contrario si no llega el mensaje >> Advertencia: cada niño en una lista debe tener un accesorio de "clave" único.
Si trato de resolver el problema de la clave única con el índice , el mensaje de error desaparece pero el problema permanece >> sin animar
Entonces, el consejo de otros desarrolladores es usar una clave única pero no usar el índice.
Okey, uso una clave única en cada hechizo.
Pero el problema es que la "función de mapa externo o div" solo uso index.
Mi animación acepta este formulario de datos: matriz en matriz, así que deletrear en palabra
entonces el problema de esta fila
<div key={index} >pienso
Pero abro toda otra solución.
¿Cuál es la solución?
Gracias
La publicación de origen de mi problema: StaggerChildren solo funciona primero renderizado en animación de texto
import React from "react"; import "./AnimatedText.css"; export default function AnimatedText() { let animatedText = [ [ { name: "H", id: 1 }, { name: "o", id: 2 }, { name: "w", id: 3 }, ], [ { name: "s", id: 4 }, { name: "o", id: 5 }, { name: "l", id: 6 }, { name: "v", id: 7 }, { name: "e", id: 8 }, ], [ { name: "t", id: 9 }, { name: "h", id: 10 }, { name: "i", id: 11 }, { name: "s", id: 12 }, { name: "?", id: 13 }, ], ]; return ( <div className="animated-text"> <h1>Animated Text</h1> {animatedText.map((item,index) => ( <div key={index} > {item.map((x) => ( <p key={x.id}>{x.name}</p> ))} </div> ))} </div> ); }La única forma de dar claves únicas a ese bucle .map externo es hacer que los elementos sean objetos en lugar de arreglos . P.ej:
let animatedText = [ { id: 1, elements: [ { name: "H", id: 1 }, { name: "o", id: 2 }, ], }, { id: 2, elements: [ { name: "s", id: 1 }, { name: "o", id: 2 }, ], }, ];Pero también tenga en cuenta que el requisito de movimiento del enmarcador es un problema diferente a la advertencia de reaccionar :
Podría ser apropiado usar el índice para los componentes de reacción, si está seguro de que el orden de los elementos es siempre el mismo, como dice la reacción :
Cuando no tiene ID estables para los elementos representados, puede usar el índice de elementos como clave como último recurso.