Passando props para um componente

[vanderleipinto]

Passando props para um componente

Props em React com TypeScript

No React com TypeScript:

• Você pode definir tipos para props, garantindo que apenas os dados corretos sejam passados ao componente.
• O TypeScript pode detectar erros de tipo em tempo de compilação, ajudando a encontrar problemas antes que afetem seu aplicativo.

Exemplo:

interface PessoaProps {
  nome: string;
  idade: number;
}

function Perfil(props: PessoaProps) {
  return (
    <div>
      <h2>{props.nome}</h2>
      <p>Idade: {props.idade}</p>
    </div>
  );
}

// Usando o componente Perfil com tipagem:
const pessoa: PessoaProps = {
  nome: "João Silva",
  idade: 30,
};

<Perfil {...pessoa} />

Vantagens de usar TypeScript com props:

• Melhor segurança de tipos: garante que os dados corretos sejam passados aos componentes.
• Detecção de erros em tempo de compilação: previne erros antes que afetem seu aplicativo.
• Melhor legibilidade do código: facilita a compreensão do que cada componente espera como props.
• Autocompletar e documentação: IDEs podem fornecer autocompletar e documentação para props tipadas.

Dicas:

• Comece definindo tipos simples para suas props.
• Utilize interfaces para definir tipos mais complexos.
• Use validação de props para garantir que os valores recebidos sejam válidos.

[vanderleipinto]

Na page principal usamos o elemento Person passando os valores para as props, como se fossem argumentos.

import { Geo, } from "@/components/Geo";
import { Person } from "@/components/Person";

function Page(){
  return(
    <div>
      <h1>Olá mundo</h1>
      <Geo/>
      <Person 
        name="Elon Musk Props"
        avatar= 'https://files.sunoresearch.com.br/p/uploads/2018/09/Elon-Musk-2-400x300.jpg'
        roles= {['Ceo da Tesla', 'Ceo da Spacex']}
      />
    </div>
  )
}

export default Page;

No componente vamos receber a props, mas para isso ela precisa ser tipada, por isso criaremos o type Props, aqui será criada no próprio arquivo do componente. Aqui o address pode ou não receber valores. Isso se dá por ('?') no final da declaração.

type Props = {
  name: string,
  avatar: string,
  roles: string[],
  address?: string //valor opcional, pode ou não receber valores por parâmetros.
}

Agora, no componente recebemos a props e usamos seus valores:

export const Person = (props: Props) => {
return (

      <div>
          <p>props.name, props.avatar, props.roles</p>        
          <h1 className="w-auto font-semibold text-2xl text-purple-300"> {props.name}</h1>
          <img src={props.avatar} alt={props.name} className="w-40"/>

          <ul>
            <li>{props.roles[0]}</li>
            <li>{props.roles[1]}</li>
          </ul>
        </div>
}

Podemos facilitar a leitura das props passando elas para constantes:

export const Person = (props: Props) => {

  const {name, avatar, roles} = props; 

  return (
    <div>
      <div>
        <p>name, avatar, roles</p>
        <h1 className="w-auto font-semibold text-2xl text-purple-300"> {name}</h1>
        <img src={avatar} alt={name} className="w-40"/>

        <ul>
          <li>{roles[0]}</li>
          <li>{roles[1]}</li>
        </ul>
      </div>
    </div>
  )
}

Para facilitar ainda mais podemos receber as props diretamente em constantes no parâmetro da função:

type Props = {
  name: string,
  avatar: string,
  roles: string[],
  adress?: string
}

export const Person = ({name, avatar, roles}: Props) => {

  return (
      <>
        <h1>{name}</h1>
        <img 
          src={avatar} 
          alt={name}
          className="w-40"
        />

        <ul>
          <li>{roles[0]}</li>
          <li>{roles[1]}</li>
        </ul>

      </>

    )
}