Un componente VerifiedComp representa children si el correo electrónico está verificado (un accesorio de redux). Si el correo electrónico no está verificado, muestra un botón. El problema que tengo es que el mecanografiado solicita niños en el componente principal.
Aquí está el componente CreatePage , que es el componente principal.
type StateTypes = { history: { push: (link: string) => {} }; }; const mapStateToProps = ({ history }: StateTypes) => ({ history, }); const connector = connect(mapStateToProps, { startCreateMovie }); type PropsFromRedux = ConnectedProps<typeof connector>; export const CreatePage = ({ history, startCreateMovie }: PropsFromRedux) => { return ( <VerifiedComp> <CreateForm ... /> </VerifiedComp> ); }; Y aquí está el VerifiedComp .
type PropTypes = { children: React.ReactNode }; type StateTypes = { auth: { user: { emailVerified: boolean }, providerData: {email: string} }; } const mapStateToProps = (state: StateTypes, props: PropTypes) => ({ email: state.auth.providerData.email, children: props.children, emailVerified: state.auth.user.emailVerified }); const connector = connect(mapStateToProps); type PropsFromRedux = ConnectedProps<typeof connector>; const VerifiedComp: React.FC<PropsFromRedux> = (props: PropsFromRedux) => { return props.emailVerified ? ( <React.Fragment>{props.children}</React.Fragment> ) : ( <Box>.....</Box> )aqui esta el problema completo
Type '{ children: Element; }' is missing the following properties from type '{ email: string; emailVerified: boolean; }': email, emailVerified TS2739 19 | export const CreatePage = ({ history, startCreateMovie }: PropsFromRedux) => { 20 | return ( > 21 | <VerifiedComp> | ^ 22 | <MovieFormEs porque has hecho que la propiedad de los niños sea obligatoria.
type PropTypes = { children: React.ReactNode };en su lugar, hágalo opcional como se muestra a continuación:
type PropTypes = { children?: React.ReactNode };