Tengo una pantalla simple donde uso algunos componentes personalizados, pero tengo problemas con un error ts:
Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & { className?: string | undefined; }'.
en este archivo donde importo mi componente ContentCenterDiv :
import LoadingIndicator from './LoadingIndicator';
import ErrorIndicator from './ErrorIndicator';
import React from 'react';
import ContentCenterDiv from './ContentCenterDiv';
export default function LoadingAndErrorCentered({ isLoading, isError, error }: { isLoading: boolean, isError: boolean, error: any }) {
return (
<ContentCenterDiv>
<LoadingIndicator isLoading={isLoading} />
<ErrorIndicator isError={isError} error={error} />
</ContentCenterDiv>
);
}
ContentCenterDiv.tsx:
import React from "react";
export default function ContentCenterDiv({ className, ...others }: { className?: string }) {
return <div {...others} className={`w-100 d-flex flex-column align-items-center ${className}`} />;
}
Para ser claros, ContentCenterDiv es un 'contenedor', lo que significa que es el elemento principal de uno o más componentes.
Con el tipo de accesorios { className?: string } , especifica que ContentCenterDiv no tiene otros accesorios además de className , lo que significa que tampoco tiene accesorios para children y, por lo tanto, no aceptará niños.
Puede especificar manualmente una propiedad children?: ReactNode en el tipo de parámetro, o usar el tipo genérico React.PropsWithChildren para agregarlo:
function ContentCenterDiv({ className, ...others }:
PropsWithChildren<{ className?: string }>) {
return <div {...others} className={`w-100 d-flex flex-column align-items-center ${className}`} />;
}