Tengo un componente FooterScroll . Y la página principal es TvIndex .
Este es el componente FooterScroll
const FooterScroll = (Id: number) => { const { event } = useEvent(Id); console.log('Id', Id); return ( <Marquee speed={85}> <Grid container> {event?.notices.map((notice: EventNotice) => { if (notice.approved) { return ( <> <Grid item px={4} key={notice.id}> <CampaignIcon /> </Grid> <Grid item alignItems="center"> {notice.body} </Grid> </> ); } })} </Grid> </Marquee> ); }; export default FooterScroll;Esta es la página de TvIndex
import FooterScroll from 'components/pages/members/tv/scrolling-footer'; const TvIndex: React.FC = () => { const classes = useStyles(); return ( <div className={classes.root}> <div className={classes.scrollFooter}> <FooterScroll Id={39324} /> </div> </div> ); }; export default TvIndex; Por algunas razones que no entiendo, cuando paso cualquier número de identificación como accesorio en mi componente principal para FooterScroll , me da este error: Type '{Id: number;}' is not assignable to type 'number' . Luego decidí registrarlo en la consola dentro de FooterScroll , y parece que después de que la identificación se pasa en TvIndex , pasa dentro del componente FooterScroll como un objeto, así: Id > Object { Id: 39324 } .
¿Como puedo resolver esto?
El argumento que se pasa a un componente de React es un objeto , cuyas propiedades son los apoyos transmitidos por la persona que llama. Por ejemplo
<FooterScroll Id={39324} />da como resultado un objeto prop de:
{ Id: 39324 } Reaccionar al hacerlo de esta manera permite agregar fácilmente accesorios adicionales o propiedades al objeto de props , sin cambiar mucho la firma de la función:
<FooterScroll Id={39324} someOtherProp="foo" />da como resultado un objeto prop de:
{ Id: 39324, someOtherProp: 'foo' }Por lo tanto, debe cambiar la definición de la función a
const FooterScroll = ({ Id }: { Id: number }) => {o hacer
const FooterScroll = (props: { Id: number }) => { const { Id } = props;Sus argumentos para FooterScroll son incorrectos. Prueba esto:
const FooterScroll = ({ Id }: { Id: number }) => { ... }Deberia de funcionar.