Coffee bytes

Blog de desarrollo web con Python y Javascript

Eduardo Zepeda

Types para React components con children

El martes, 19 de octubre de 2021

por Eduardo Zepeda

Tiempo de lectura: 2 minutos

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.

Revisa mis otras entradas de React.

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

Usando React.FC

La segunda manera es usando un el objeto FC (Functional Component) que nos provee React.

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.

Presume lo que aprendiste en redes

Únete a mi comunidad de lectores

Recibe contenido como este por correo electrónico, una vez por semana, de manera totalmente gratuita.

* Campo obligatorio