El objeto props y children

Curso de React.js con TypeScript

Introducción

TypeScript y React: Proyecto Práctico con Next.js

Tipado Implícito y Explícito en TypeScript

Creación de proyecto con Next.js y configuración de TypeScript

Tipado en React

Componentes de React con TypeScript: Creación de Lazy Image

Definición de Props en Componentes React con TypeScript

Tipado de useState en React con TypeScript

Refactorización de Tipos en TypeScript y React

React y el DOM

Manejadores de Eventos en React con TypeScript

Lazy Loading de Imágenes con React y TypeScript

Uso de IntersectionObserver en React para Carga Diferida de Imágenes

Creación de Componentes Genéricos con TypeScript y Lazy Loading

Implementación de onLazyLoad en React con TypeScript

Configuraciones avanzadas

Uso Correcto de Tipos Globales en TypeScript

Creación de Tipos Personalizados para Librerías en TypeScript

Integración de Plugins Externos en TypeScript

Próximos pasos

Tipado Avanzado en Redux con TypeScript y React

No tienes acceso a esta clase

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

Si ya tienes una cuenta,

Recursos

¿Cómo manejar los props en un componente de React?

Cuando trabajamos con React, es fundamental comprender cómo funcionan los props, ya que son el medio a través del cual los componentes se comunican entre sí. En términos simples, un prop es un objeto en React, y con TypeScript, lo tipificamos como cualquier otro objeto. Así, mantener el orden y la claridad en los componentes se vuelve primordial para un desarrollo efectivo en React.

¿Cómo definir y utilizar props en TypeScript?

Definir correctamente los props en un componente de React es esencial para el buen funcionamiento de la aplicación. En el siguiente ejemplo práctico, veremos el proceso detallado para definir y utilizar props en un componente:

Identificar el prop que se utilizará: En el componente RandomFox, se desea pasar una imagen como prop desde el componente padre.
Definir el tipo de prop en TypeScript: Para ello, se tipifica el prop como se haría con cualquier otro objeto en TypeScript.
```
type ImageProp = {
  image: string;
};
```

Ajustar el componente para aceptar props: Se indica al componente que aceptará props de tipo ImageProp.

const RandomFox: React.FC<ImageProp> = ({ image }) => {
  return <img src={image} alt="Random Fox" />;
};

Hacer destructuring de props: En lugar de utilizar la palabra props para describir el valor, se utiliza destructuring para extraer directamente la propiedad necesaria.
```
const RandomFox: React.FC<ImageProp> = ({ image }) => {
  return <img src={image} alt="Random Fox" />;
};
```
Utilizar el componente con los props correctos: Finalmente, en el archivo donde se utiliza el componente, se le pasan los props necesarios.
```
<RandomFox image="https://example.com/fox.jpg" />
```

¿Cómo gestionar múltiples props en un componente?

Cuando un componente necesita gestionar múltiples props, el enfoque es similar, pero requiere atención a cada tipo de dato. Siga estos pasos:

Definir un tipo compuesto para los props: Se crea un objeto de tipo que incluya todas las propiedades necesarias.
```
type ComponentProps = {
  image: string;
  alt: string;
};
```
Actualizar el componente para aceptar los nuevos props: Se ajusta el tipo aceptado por el componente para incluir todos los props definidos.
```
const RandomFox: React.FC<ComponentProps> = ({ image, alt }) => {
  return <img src={image} alt={alt} />;
};
```
Enviar los props al componente: Se asegura de incluir todos los props cuando se utiliza el componente.
```
<RandomFox image="https://example.com/fox.jpg" alt="A random fox image" />
```

¿Qué beneficios ofrece TypeScript en la gestión de props?

TypeScript añade un nivel de confianza y seguridad al desarrollo con React, ya que proporciona:

Comprobación de tipos: Evita errores al asegurarse de que los datos pasados a los componentes correspondan al tipo esperado.
Autocompletado: Mejora la experiencia de desarrollo con sugerencias de propiedades y métodos disponibles.
Documentación automática: Al definir tipos, se facilita la comprensión del código para otros desarrolladores.

A medida que continúas explorando el potencial de React y TypeScript juntos, experimentarás un desarrollo más estructurado y libre de errores. ¡Sigue adelante y descubre cómo gestionar el estado (state) ofrecerá otra capa de dinamismo a tus aplicaciones!

Aportes 8

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.

hace 4 meses

Los props, son propiedades de los componentes. Es un objeto que se tipea como cualquier objeto.

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" />
  )
}