Tengo un problema con la duplicación de código al crear cualquier componente nuevo.
¿Cómo puedo pasar className entre todos los componentes sin definir el accesorio className cada vez que creo un nuevo componente?
Digamos que creé un nuevo componente llamado ChildComponent , debo definir el nombre de la clase y agregarle un valor predeterminado, y cada vez que creo un nuevo componente, defino el nombre de la clase nuevamente.
type ChildComponentProps = { className?: string; children: string; }; export default function ChildComponent({ className, children }: ChildComponentProps): JSX.Element { return <p className={className ?? ''}>{children}</p>; } ChildComponent.defaultProps = { className: null, };Asi que. ¿Hay alguna forma de pasar el className entre componentes sin duplicación de código en cada componente?
Ampliando lo que escribió Julio Alves en su comentario , puede crear un archivo de types/foo.d.ts con los siguientes contenidos:
type CustomComponentType = React.FC<{ className?: string; }>; Luego, en su código, puede hacer referencia directamente a su CustomComponentType sin importarlo:
const ChildComponent: CustomComponentType = ({ className, children }) => ( <p className={className}>{children}</p> ); export default ChildComponent; Y no hay necesidad de definir defaultProps , al menos en este caso.
Si también enfrenta problemas similares con otros accesorios estándar, en lugar de escribir cada uno en el archivo de declaración, puede usar los tipos proporcionados por React (técnicamente DefinitelyTyped):
const MyParagraphWrapper: React.FC<React.HTMLProps<HTMLParagraphElement>> = ({ children, ...props }) => <p {...props}>{children}</p>; // eslint-disable-line react/jsx-props-no-spreading Puede pasar any / unknown si desea generalizar esto.
type GeneralWrapperComponentType = React.FC<React.HTMLProps<unknown>>;