No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

El objeto props y children

5/16
Recursos

Aportes 8

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

馃啔 Interface vs Type

馃憖 Ojito que tambi茅n podemos definir con una interface el tipado del objeto props

interface Props {
  image: string;
}

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

En caso de que quieras saber m谩s acerca del uso debido de cada forma te dejo este art铆culo que me gusto mucho acerca de cuando usar interfaces y cuando definir tipos de objetos en TypeScript

馃憠 TypeScript React props: interfaces vs type aliases

馃 Como opini贸n personal me gusta usar m谩s interfaces, pero me gustar铆a saber cu谩l es tu opini贸n?

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.

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