Utiliza este crédito para lanzar tus proyectos ahora en Digital Ocean, válido por 60 días
Índice del contenido
Types para React components con children
Types para React components con children
Typescript requiere que especifiquemos los types para las diferentes variables y argumentos de funciones en React. Cuando son tipos nativos no es muy complicado, pero para componentes de React puede llegar a ser diferente. Aquí dejo 3 maneras de especificar los types para componentes de React que contienen children como parte de sus props.
Types Con ReactNode
La manera más sencilla es de manera manual, especificando a children como un nodo de React opcional.
import React from 'react'
type props = {
children?: React.ReactNode
}
const MyComponent = ({ children }: Props) => {
return (
<div>
{children}
</div>
)
}
export default MyComponent
No te conformes con Javascript, aprende también Typescript
PatrocinadoSi tus habilidades en Javascript ya son lo suficientemente buenas como para escribir algunas aplicaciones de complejidad media, probablemente te habrás dado cuenta de algunas de sus múltiples debilidades, Typescript fue creado para resolverlas, y hay plataformas como educative, que te llevarán a dominar Typescript.
Ya sabes React, ¿y ahora qué?
PatrocinadoReact es una librería, pero hay frameworks basados en React que pueden acelerar tu desarrollo y encargarse de todo el boilerplate que se suele escribir, uno de ellos, y mi favorito personal es Nextjs. Si estás buscando sacar provecho de tus habilidades con React tal vez deberías aprender Nextjs.
No te conformes con Javascript, aprende también Typescript
PatrocinadoSi tus habilidades con Javascript son lo suficientemente buenas como para escribir algunas aplicaciones de complejidad media, probablemente habrás notado algunas de sus debilidades, Typescript fue creado para solucionarlas, y hay plataformas por ahí, como educative, que pueden enseñarte todo lo que necesitas saber sobre Typescript por unos pocos dólares.
Usando React.FC
La segunda manera es usando un el objeto FC (Functional Component) que nos provee React, el cual deja implícito el uso de children y además evita que devolvamos undefined. Considera que usar React.FC es considerado por algunos desarrolladores como una mala práctica .
import React from 'react'
const MyComponent: React.FC<{}> = ({ children }) => {
return (
<div>
{children}
</div>
)
}
export default MyComponent
React.PropsWithChildren
La última manera es haciendo uso del objeto PropsWithChildren que provee React que, como dice su nombre, ya incluye los props con el componente children, listo para usarse de manera directa.
import React from 'react'
type Props = React.PropsWithChildren<{}>
const MyComponent = ({ children }: Props) => {
return (
<div>
{children}
</div>
)
}
export default MyComponent
Mira lo que Typescript tiene para decir en React en su documentación oficial.
Otros posts recomendados
-
-
-
-
-
-
