Estoy usando el react-loading-skeleton y estoy tratando de crear un componente reutilizable encima del componente <Skeleton /> de esta biblioteca.

La razón por la que intento crear algo como esto es porque no me gusta el enfoque de react-loading-skeleton, que es algo como esto:

 <div> <h1>{props.title || <Skeleton />}</h1> {props.body || <Skeleton count={10} />} </div>

Creo que el código sería difícil de entender y repetitivo.

Mi idea es crear un componente JSX personalizado que tenga los siguientes accesorios:

1. Componente: para renderizar el componente cuando no se necesita el esqueleto
2. condition - Para verificar si debe renderizar el componente o el esqueleto
3. skeletonCount: solo un accesorio de la biblioteca de esqueletos
4. ...accesorios: para recibir todos los accesorios adicionales que pueda tener el Componente.

Quiero saber si este es un buen enfoque porque recibí algunos errores mecanografiados relacionados con ... accesorios.

Este es el componente:

 import React from 'react'; import Skeleton from 'react-loading-skeleton'; import type { SkeletonProps } from './types'; export const SkeletonHandler: React.FC<SkeletonProps> = ({ Component, condition, skeletonCount, ...props }) => { return condition ? ( <Component {...props} /> ) : ( <Skeleton count={skeletonCount} /> ); };

Mis tipos.ts:

 export type SkeletonProps = { Component: React.JSXElementConstructor<any>; //idk if this is the correct type to use tbh. skeletonCount: number; condition: boolean; };

Uso:

 <SkeletonHandler Component={TierTitle} variant="h4" color="black" bold> {clientName} </SkeletonHandler>

PD: variante, color, negrita y nombre del cliente son todos los valores que estaban en el componente.

Por favor, avíseme si hay una mejor manera de resolver este problema.