Passando Props a um Componente

Props familiares

Props são as informações que você passa usando uma tag JSX. Por exemplo, className, src, alt, width, e height são algumas das props que você pode passar a uma <img>:

As props que você pode passar a uma tag <img> são predefinidas (A ReactDOM conforma-se ao padrão HTML). Mas você pode passar quaisquer props aos seus próprios componentes, como um <Avatar>, para customizá-los. Veja como fazer isso!

Passando props para um componente

Neste código, o componente Profile não está passando nenhuma prop ao seu componente filho, Avatar:

export default function Profile() {
  return (
    <Avatar />
  );
}

Você pode atribuir algumas props ao Avatar em dois passos.

Passo 1: Passe props ao componente filho

Primeiro, passe algumas props ao Avatar. Por exemplo, vamos passar duas props: person (um objeto), e size (um número):

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

Agora você pode ler essas props dentro do componente Avatar.

Passo 2: Leia props dentro de um componente filho

Você pode ler estas props listando seus nomes person, size separados por vírgulas dentro de ({ e }) diretamente depois de function Avatar. Isso permite que você as use dentro do código de Avatar, assim como você faria com uma variável.

function Avatar({ person, size }) {
  // person e size estão disponíveis aqui
}

Adicione alguma lógica a Avatar que use as props person e size para a renderização, e pronto.

Agora você pode configurar Avatar para que seja renderizado de várias maneiras diferentes usando props diferentes. Tente mudar os valores!

Props permitem que você pense sobre os componentes pai e filho independentemente. Por exemplo, você pode mudar as props person ou size dentro de Profile sem ter que pensar sobre como Avatar as usa. Similarmente, você é livre para mudar como Avatar usa essas props, sem checar o Profile.

Você pode pensar nas props como “controles” os quais você pode ajustar. Elas desempenham o mesmo papel que os argumentos para funções-de fato, props são o único argumento para o seu componente! Os componente funcionais do React aceitam apenas um argumento, um objeto props:

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Normalmente você não precisa de todo o objeto props em si, então você pode desestruturá-lo em props individuais.

function Avatar({ person, size }) {
  // ...
}

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Especificando um valor padrão para uma prop

Se você quer dar a uma prop um valor padrão para usar quando nenhum valor for especificado, pode fazer isso com a desestruturação colocando = e o valor padrão logo depois do parâmetro:

function Avatar({ person, size = 100 }) {
  // ...
}

Agora, se <Avatar person={...} /> for renderizado sem a prop size, size será igual a 100.

O valor padrão é apenas utilizado se a prop size não for especificada ou se você passar size={undefined}. Mas caso você passe size={null} ou size={0}, o valor padrão não será usado.

Encaminhando props com a sintaxe de espalhamento JSX

Às vezes, passar props se torna muito repetitivo:

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

Não há nada de errado com código repetitivo-ele pode ser mais legível. Mas às vezes você pode valorizar concisão. Alguns componentes encaminham todas as suas props aos seus filhos, como Profile faz com Avatar. Como eles não usam nenhuma de suas props diretamente, pode fazer sentido usar uma sintaxe de espalhamento mais concisa:

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

Isso encaminha todas as props de Profile ao Avatar sem listar cada um de seus nomes.

Use a sintaxe de espalhamento com cuidado. Se você está a utilizando em quase todos os componentes, algo está errado. Muitas vezes, isso indica que você deveria dividir seus componentes e passar filhos como JSX. Mais sobre isso a seguir!

Passando JSX como children

É comum aninhar tags embutidas no navegador:

<div>
  <img />
</div>

Às vezes você desejará aninhar seus próprios componentes da mesma forma:

<Card>
  <Avatar />
</Card>

Quando você aninha conteúdo dentro de uma tag JSX, o componente pai irá receber esse conteúdo em uma prop chamada children. Por exemplo, o componente Card abaixo receberá a prop children definida como <Avatar /> e o renderizará em uma wrapper div:

Tente substituir o <Avatar> dentro de <Card> com algum texto para ver como o componente Card pode encapsular conteúdo aninhado. Ele não precisa “saber” o que está sendo renderizado dentro dele. Você encontrará esse padrão flexível em muitos lugares.

É possível pensar sobre um componente com a prop children como se ele tivesse um “buraco” o qual pode ser “preenchido” por seus componente pais com JSX arbitrária. Você frequentemente usará a prop children para wrappers visuais: painéis, grids, etc.

Como props mudam com o passar do tempo

O componente Clock abaixo recebe duas props de seu componente pai: color e time. (O código deste componente pai está omitido porque usa state, conceito o qual nós não vamos nos aprofundar ainda.)

Tente mudar a cor na caixa de seleção abaixo:

Este exemplo ilustra que um componente pode receber props diferentes com o passar o tempo. Props não são sempre estáticas! Aqui, a prop time muda a cada segundo, e a prop color muda quando você seleciona outra cor. As props refletem os dados de um componente a qualquer instante, não apenas num primeiro momento.

Entretanto, as props são imutáveis-um termo da ciência da computação o qual significa “inalterável”. Quando um componente precisa mudar suas props (por exemplo, em resposta à interação do usuário ou a novos dados), ele terá que “pedir” ao componente pai que passe props diferentes- um novo objeto! Suas props antigas serão então deixadas de lado, e eventualmente o motor do JavaScript irá recuperar a memória ocupada por elas.

Não tente “alterar props”. Quando você precisa responder a interações do usuário (como trocar a cor selecionada), você terá que “definir state”, sobre o qual você pode aprender em State: A Memória de um Componente.