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 fixo para todos. Um componente que consegue renderizar apenas um valor fixo não consegue fazer isso sozinho. Props (abreviação de properties, ou propriedades) são como você passa dados para um componente de fora para dentro, do mesmo jeito 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="Ada" />

Greeting recebe uma prop, name. React coleta cada atributo que você escreve em <Greeting> dentro de um único objeto e passa esse objeto como o primeiro argumento do componente, então { name } aqui está desestruturando esse objeto para extrair o valor name direto. Chame <Greeting name="Ada" /> e name será "Ada" 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, descendo para dentro do componente. Dentro de Greeting, name se comporta como uma variável comum, 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 abordaremos alguns capítulos à frente.

Valores padrão

Se uma prop pode estar ausente, defina um padrão da mesma forma que você definiria um padrão para 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 voltará ao padrão 'amigo'. Passe um name e ele sobrescreve o padrão. Essa é a sintaxe ordinária de parâmetro padrão do JavaScript, 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 passa isso automaticamente como uma prop especial chamada children.

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

// uso:
// <Card>
//   <p>O que você escrever aqui vira 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 guardar qualquer valor JavaScript: números, booleanos, objetos, arrays, até funções. Envolva o valor entre chaves em vez de aspas.

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

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

user aqui é um objeto, e onSelect é uma função passada 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 aborda em detalhes a seguir; confie nisso por enquanto. É assim que componentes se comunicam: dados viajam para baixo através de props e comportamento viaja do mesmo jeito, como uma função que o filho pode chamar.

Fluxo de dados unidirecional

Props fluem para baixo na árvore de componentes de propósito. Um pai passa dados para um filho, esse filho pode passar adiante para baixo, 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 imutável.

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 alcançar para cima e mutar as props que um pai lhe passou, o pai perderia qualquer visão confiável de seus próprios dados, e rastrear um bug significaria verificar cada filho por onde o valor passou em vez do único lugar onde na verdade mudou. Manter props somente leitura mantém isso rastreável: qualquer valor na sua UI tem exatamente um lugar onde é definido.

Props colocam dados em um componente de fora para dentro. Alguns capítulos à frente, state aborda como um componente mantém e atualiza seus próprios dados ao longo do tempo.

JunoProps são somente leitura Props é 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.

Defina um valor padrão com = quando uma prop pode estar ausente, e lembre-se que qualquer coisa que você coloca entre as tags de um componente chega como sua prop children.

JunoProps são somente leitura Props são as entradas para um componente: desestruture-as do parâmetro, defina padrões para as que podem estar ausentes, e trate children como outra prop que simplesmente chega através do conteúdo das tags em vez de um atributo.

Elas podem guardar qualquer coisa, strings, objetos, funções, então use-as para passar dados e comportamento para baixo juntos. Não mute o que você recebeu; props permanecem somente leitura.

JunoProps são somente leitura Props carregam dados em uma direção, 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 ordinária de JavaScript e JSX em cima de um objeto simples. Mantenha props imutáveis do lado do componente e a renderização permanece previsível, a propriedade na qual você está confiando em todos os outros lugares do React.

Próximo: Listas e chaves, onde um componente renderiza um array inteiro de dados.