No tienes acceso a esta clase

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

Definición de Props en Componentes React con TypeScript

5/16
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:

  1. Identificar el prop que se utilizará: En el componente RandomFox, se desea pasar una imagen como prop desde el componente padre.

  2. 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;
    };
    
  3. 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" />;
    };
    
  4. 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" />;
    };
    
  5. 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:

  1. 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;
    };
    
  2. 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} />;
    };
    
  3. 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?

Any es el demonio vale ☺

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;

Enemigo: Any

Recuerden que any es el enemigo🤣

Any = PELIGRO!!!

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.

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

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

  1. 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" />
      )
    }
    
  2. 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" />
      )
    }
    
  3. 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" />
      )
    }