El objeto props y children

Curso de React.js con TypeScript

Introducción

El presente del Frontend es TypeScript

Tipado implícito vs. tipado explícito

Creando una app con React y TypeScript

Tipado en React

Diferentes formas de definir un componente

El objeto props y children

State con tipos primitivos

State con tipos personalizados

React y el DOM

Tipos para eventos y callbacks de escuchadores

Tipos para referencias y observadores

Lazy loading con observadores

Componentes que extienden elementos DOM

Reto: sigamos extendiendo el DOM

Configuraciones avanzadas

Creando tipos propios para la aplicación

Trabajando con librerías no-tipadas

Trabajando con librerías que extienden el objeto window

Próximos pasos

¿Quieres más cursos de React con TypeScript?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 7

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Marcos Antonio Ortiz Manjarres

hace 2 años

Any es el demonio vale ☺

Antony Jose Cabeza Rauseo

hace 2 años

Mis Apuntes

Para poder usar las props con TSX primero tenemos que tipar el objeto de props. Lo hacemos asignándole un tipo por cada prop que tengamos, y para hacerlo mas mantenible, separamos esos tipos en un objeto aparte (ya sea con type o interface).

// RandomFox.tsx
type Props = {
  image: string;
  alt: string;
	// another prop
};
export const RandomFox = ({ image, alt }: Props): JSX.Element => {
// Lo que hicimos fue desestructurar el objeto props para 
// quedarnos solo con lo que necesitamos (image y alt)
  return (
    <img width={320} height='auto' src={image} alt={alt} className='rounded' />
  );
};

Nota: En dado caso de que queramos añadir una nueva prop, hay que definirle su tipo o sino TS nos da un error

// index.tsx
import { NextPage } from 'next';
import Head from 'next/head'
import { RandomFox } from '@/components/RandomFox';

const random = (): number => Math.floor(Math.random() * 123) + 1;

const Home: NextPage = () => {
  return (
    <>
      <Head>
        <title>React con TypeScript</title>
        <meta name="description" content="Generated by me" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <RandomFox alt='zorrito' image={`https://randomfox.ca/images/${random()}.jpg`} />
				{/* Si tenemos que mandar otra prop hay que definirla en nuestro tipo Props */}
      </main>
      <footer>
				El mejor footer de la historia
      </footer>
    </>
  )
}

export default Home;

Miguel Ángel Bolaños Quiñonez

hace 2 años

Enemigo: Any

Enrique Aguilera

hace 2 años

Recuerden que any es el enemigo🤣

José Luis Manco Velásquez

hace 2 años

Any = PELIGRO!!!

César Augusto Cortés Labrada

hace 2 años

CÓMO TIPAR UN CHILDREN:
https://blog.logrocket.com/using-react-children-prop-with-typescript/

Recordemos que children es una propiedad que viene dentro del objeto prop
EJEMPLO 1:

Aquí vemos que le paso la etiqueta <figcaption> como children a <RandomFox>

import { RandomFox } from '@/components/RandomFox';

const randomNum = ()=> Math.floor(Math.random()*123 + 1);

export default function Home() {
  return (
    <div>
      <main>
        <p>Chikorita Papu!!</p>
        <RandomFox img={randomNum()}>
          <figcaption>Fox image</figcaption> //children
        </RandomFox>
      </main>

    </div>
  )
}

Ahora veamos el componente como se ve:

Vemos que, usando un alias creo el type props y este guarda la propiedad img y la propiedad children; img es tipado como number en mi caso y children es tipado como JSX.Element. De esta manera no obtenemos error.

type props = {
    img: number;
    children: JSX.Element;
}

function RandomFox({img, children}: props ) : JSX.Element{
    return (
        <figure>
            <img src={`https://randomfox.ca/images/${img}.jpg`} alt="fox img"
                width={320} height={"auto"} className="mt-3"/>
            {children}
        </figure>
       
    )
}
export {RandomFox}

¿Y si queremos más de un hijo? Recordemos que más hijos forman un array de hijos.

<RandomFox img={randomNum()}>
          <figcaption>Fox image</figcaption>
          <p>Other child</p>
  </RandomFox>

En el componente sólo debemos decir que queremos que nuestro children admita también un array de JSX.Element.

type props = {
    img: number;
    children: JSX.Element | JSX.Element[]; 
}

function RandomFox({img, children}: props ) : JSX.Element{
    return (
    
        <figure>
            <img src={`https://randomfox.ca/images/${img}.jpg`} alt="fox img"
                width={320} height={"auto"} className="mt-3"/>
            {children}
        </figure>
       
    )
}
export {RandomFox}

Al menos así entendí como se debe hacer, espero correcciones si son necesarias.

Alexander Gonzalez

hace 2 años

Hay dos formas para poder enviar los props, sin embargo el tiparlo es la más recomendada y fácil de mantener.

Está es la forma recomendada y estándar, ya que es más especifica.

type Props = {
  image: string,
}

// destructing de las props es mejor
export const RandomFox = ({image}: Props): JSX.Element => {
    return (
    <img src={image} width="420" height='auto' className="rounded" />
  )
}

Aún no es la recomendada es otra opción.

type Props = {
  image: string,
}

export const RandomFox = (props: Props): JSX.Element => {
    return (
    <img src={props.image} width="420" height='auto' className="rounded" />
  )
}

Está es otra forma pero no se recomienda su uso ya que es díficil de mantener.

export const RandomFox = (props: {image: string}): JSX.Element => {;
    return (
    <img src={props.image} width="420" height='auto' className="rounded" />
  )
}