Props

Imagine que você está construindo um componente Greeting para um banner de boas-vindas, e cada visitante que faz login precisa ver seu próprio nome nele em vez de um nome único codificado para todos. Um componente que consegue renderizar apenas um valor fixo não consegue fazer isso sozinho. Props (abreviação de properties) são como você passa dados para um componente de fora, da mesma forma que um argumento passa um valor para uma função. Você escreve props em um componente da mesma forma que escreve atributos em uma tag HTML, e o componente as lê através de um único parâmetro.

function Greeting({ name }) {
  return <h1>Olá, {name}</h1>
}
// uso: <Greeting name="Maria" />

Greeting recebe uma prop, name. React reúne cada atributo que você escreve em <Greeting> em um único objeto e passa esse objeto como primeiro argumento do componente, então { name } aqui está desestruturando esse objeto para extrair o valor name diretamente. Chame <Greeting name="Maria" /> e name será "Maria" dentro da função. Chame novamente com um nome diferente e você obtém um heading diferente, do mesmo componente.

Props fluem em uma direção: de onde um componente é usado, para dentro do próprio componente. Dentro de Greeting, name se comporta como uma variável normal, mas o componente não consegue alterá-la: props são somente leitura. Se um componente precisa de dados que mudam ao longo do tempo, esse é um trabalho para state, que você verá em alguns capítulos adiante.

Valores padrão

Se uma prop pode estar ausente, dê a ela um padrão da mesma forma que você daria um padrão a qualquer parâmetro de função: um = no padrão de desestruturação.

function Greeting({ name = 'amigo' }) {
  return <h1>Olá, {name}</h1>
}

Chame <Greeting /> sem nenhuma prop name, e name volta ao padrão 'amigo'. Passe uma name, e ela sobrescreve o padrão. Essa é sintaxe JavaScript ordinária de parâmetro padrão, aplicada ao objeto que React passa para o componente.

A prop children

Alguns componentes precisam envolver outro conteúdo em vez de recebê-lo através de um atributo. Escreva conteúdo entre as tags de abertura e fechamento de um componente, e React o passa automaticamente como uma prop especial chamada children.

function Card({ children }) {
  return <div className="card">{children}</div>
}

// uso:
// <Card>
//   <p>Tudo o que vai aqui se torna a prop children do Card.</p>
// </Card>

children funciona exatamente como qualquer outra prop: você a lê através do mesmo parâmetro desestruturado, e o componente decide onde renderizá-la. A única diferença é como ela chega, através do conteúdo das tags em vez de um atributo nomeado.

Passando qualquer valor JavaScript

Uma prop pode conter qualquer valor JavaScript: números, booleanos, objetos, arrays, até funções. Envolva o valor em chaves em vez de aspas.

function UserCard({ user, onSelect }) {
  return <button onClick={() => onSelect(user.id)}>{user.name}</button>
}

// uso: <UserCard user={{ id: 1, name: 'Maria' }} onSelect={handleSelect} />

user aqui é um objeto, e onSelect é uma função passada para baixo para que o componente possa chamá-la. O onClick do botão executa onSelect quando alguém clica nele, um event handler que o capítulo Events cobre completamente a seguir; confie por enquanto. É assim que componentes se comunicam: dados descem através de props, e comportamento desce do mesmo jeito, como uma função que o componente filho consegue chamar.

Fluxo de dados unidirecional

Props descem na árvore de componentes propositalmente. Um componente pai passa dados para um filho, esse filho pode passar adiante, e nada flui de volta para cima através de props. Um componente nunca deve escrever em seu próprio objeto props ou mutar um objeto ou array que recebeu através de uma prop; trate tudo o que você recebe como fixo.

Essa restrição é o que mantém a renderização previsível. Quando state muda em algum lugar e React re-renderiza os componentes afetados, cada renderização recomputa seu JSX a partir das props e state atuais daquele componente. Se um componente conseguisse se alcançar e mutar as props que um pai deu a ele, o pai perderia qualquer visão confiável de seus próprios dados, e rastrear um bug significaria verificar cada filho por onde um valor passou em vez do único lugar onde ele realmente mudou. Manter props somente leitura mantém aquilo rastreável: qualquer valor na sua UI tem exatamente um lugar onde é definido.

Props trazem dados para um componente de fora. Alguns capítulos adiante, state cobre como um componente segura e atualiza seus próprios dados ao longo do tempo.

JunoProps são somente leitura Props são como um componente recebe informações de quem o usa, da mesma forma que um argumento alimenta uma função. Você as lê do parâmetro desestruturado, como { name }, e um componente nunca muda as props que recebe. Dê a uma um valor padrão com = quando ela pode estar ausente, e lembre-se que tudo o que você coloca entre as tags de um componente chega como sua prop children.

JunoProps são somente leitura Props são as entradas de um componente: desestruture-as do parâmetro, dê um padrão às que podem estar ausentes, e trate children como outra prop que acontece de chegar pelo conteúdo das tags em vez de um atributo. Elas podem conter qualquer coisa, strings, objetos, funções, então use-as para passar dados e comportamento juntos para baixo. Não mute o que você recebe; props permanecem somente leitura.

JunoProps são somente leitura Props carregam dados de uma forma, para baixo na árvore, e essa direção é essencial: um componente que muta suas próprias props quebra a garantia de que uma renderização reflete uma entrada conhecida. Parâmetros padrão e children são sintaxe JavaScript e JSX ordinária em camadas sobre um objeto simples. Mantenha props imutáveis do lado do componente e a renderização fica previsível, a propriedade que você está contando em tudo mais no React.

Próximo: Lists and keys, onde um componente renderiza todo um array de dados.