Tengo un componente SkeletonTile con una animación donde el retraso de la animación se puede especificar a través de una propiedad pasada.
Ejemplo:
type Props = { delay?: number; width?: string; height?: string; }; const SkeletonTile: React.FC<Props> = ({ delay, width, height }) => { return <div style={{ animationDelay: `${delay}s`, width, height }} className="skeleton-tile"></div>; } Ahora, pensé en tener un componente SkeletonController que puede tomar múltiples componentes SkeletonTile como elementos secundarios. El SkeletonController luego distribuiría los valores de delay a los componentes secundarios con retrasos crecientes por hijo.
Ejemplo:
<SkeletonController delayIncrease={0.2}> <SkeletonTile width="20em" height="20em" /> <div className="flex"> <SkeletonTile width="40em" height="20em" /> <SkeletonTile width="10em" height="20em" /> </div> </SkeletonController> Entonces, el primer SkeletonTile tendría la propiedad de retraso establecida en 0 , el segundo en 0.2 y el tercero en 0.4 .
Ya intenté usar la funcionalidad Children.map para modificar los valores de propiedad. Sin embargo, esto no es posible porque los valores de propiedad de los componentes son inmutables.
Claro que podría usar algún tipo de función auxiliar que crea una matriz de elementos JSX, pero luego perdería la opción de establecer otras propiedades diferentes ( width , height ) en los niños.
¿Tiene alguna idea de cómo sería posible este enfoque? De forma anticipada, muchas gracias por su ayuda.
Puede pasar una serie de propiedades para usar para crear mosaicos en su componente de controlador:
export type TileProps = { delay?: number; width?: string; height?: string; }; const SkeletonTile: React.FC<TileProps> = ({ delay, width, height }) => { return <div style={{ animationDelay: `${delay}s`, width, height }} className="skeleton-tile"></div>; } type SkeletonProps = { tiles: TileProps[]; delayIncrease: number; }; const SkeletonController: React.FC<SkeletonProps> = ({ tiles, delayIncrease }) => { return tiles.map((tile, index) => (<Tile width={tile.width} height={tile.height} delay={index * delayIncrease} />)); }Luego puede usar su componente de esqueleto de esta manera:
const tiles: TileProps[] = [ { height: '2em', width: '2em' }, { height: '2em', width: '2em' }, { height: '2em', width: '2em' }, ]; <SkeletonController delayIncrease={0.2} tiles={tiles} />