Props - Dados passados de pai para filho (imutáveis)

[Romeusorionaet]

No React, as "props" (propriedades) são uma forma de passar dados de um componente pai para um componente filho. Elas são imutáveis, o que significa que o componente filho não pode modificar diretamente os dados que recebe através das props. Se um componente precisar alterar o valor de uma prop, essa mudança deve ser feita no componente pai, e o novo valor deve ser passado novamente para o filho.

Aqui está um exemplo simples de como as props funcionam:

import Filho from './Filho';

// Componente Pai
export function Pai() {
  const mensagem = "Olá, sou uma prop!";
  
  return (
    <div>
      <h1>Componente Pai</h1>
      <Filho texto={mensagem} />
    </div>
  );
}

// Componente Filho
export function Filho({ texto }) {
  return (
    <div>
      <h2>Componente Filho</h2>
      <p>{texto}</p>
    </div>
  );
}

Explicação:

• Componente Pai (Pai):

  • Define uma constante mensagem com o valor "Olá, sou uma prop!".
  • Renderiza o componente Filho e passa a prop texto para ele, contendo a mensagem.

• Componente Filho (Filho):

  • Recebe a prop texto através de desestruturação na assinatura da função.
  • Usa a prop texto para renderizar seu conteúdo dentro de um parágrafo <p>.

Características das Props:

1. Imutabilidade: As props são imutáveis, o que significa que o componente filho não pode alterá-las diretamente. Isso mantém a unidirecionalidade do fluxo de dados em React.

2. Unidirecionalidade: Os dados fluem de pai para filho, facilitando a compreensão de como as mudanças de estado afetam a aplicação.

3. Flexibilidade: Você pode passar qualquer tipo de dado como props, incluindo strings, números, arrays, objetos, e até mesmo funções.

4. Tipagem: É comum usar bibliotecas como PropTypes ou o TypeScript para definir e verificar os tipos das props, ajudando a prevenir erros.

As props são fundamentais para o funcionamento de componentes reutilizáveis no React, permitindo que componentes recebam dados e comportamentos dinâmicos com base em suas necessidades e contexto.