Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

propriedade nomeada

Eu tenho problema quando vejo isso: export function Tema ({tema}) e alguem me diz que ({tema}) nao é um children, porque isso é o que foi passado desde o inicio do curso...

function CampoDeFormulario({children}) {
return (

ou, quando é um props, dentro de parenteses:

function CampoDeEntrada(props) {
return

dai me mandam um:

export function Tema ({tema})

e é ÓBVIO que eu vou pensar, olha um children ali. Parece que ha um tema que nao foi abordado direito na aula chamado "propriedade nomeada" que confunde as coisas. Perdendo minha tarde agarrado nessa m****

1 resposta

Entendo a frustração, e vou tentar destrinchar isso com calma porque, na real, o que está te confundindo não é React — é JavaScript.

Vamos por partes.

1. Props é um objeto. Sempre.

Quando você escreve <Tema tema="escuro" />, o React chama a função Tema passando um único argumento: um objeto com tudo que você colocou ali. Nesse caso, { tema: "escuro" }. Não existe mágica, é só uma função recebendo um objeto.

Então essas duas formas são exatamente a mesma coisa:

function Tema(props) {
  return <p>{props.tema}</p>
}

function Tema({ tema }) {
  return <p>{tema}</p>
}

A segunda usa destructuring, que é um recurso do JavaScript (não do React) pra extrair propriedades de um objeto direto na assinatura da função. ({ tema }) é o mesmo que fazer const { tema } = props na primeira linha. Só isso.

2. children não é um conceito à parte. É uma prop como qualquer outra.

Aqui é onde acho que o fio se perdeu. children não é "o jeito de receber props". children é o nome de uma prop específica — a única coisa especial nela é que o React preenche essa prop automaticamente com o que você coloca entre as tags do componente:

<CampoDeFormulario>
  <p>isso aqui vira a prop children</p>
</CampoDeFormulario>

Então function CampoDeFormulario({ children }) está fazendo destructuring de uma prop chamada children. E function Tema({ tema }) está fazendo destructuring de uma prop chamada tema. É o mesmíssimo mecanismo — a diferença é só o nome da chave que você está pegando do objeto. Se o componente recebesse as duas, seria ({ tema, children }).

Ou seja: não é que "({ tema }) parece um children". É que children sempre foi só uma prop, e você estava lendo o padrão como se fosse uma sintaxe própria.

3. Sobre "propriedade nomeada"

Não existe esse conceito separado que ficou faltando. Toda prop tem nome. O que existe é: um objeto de props, e duas formas de acessá-lo (pelo objeto inteiro ou por destructuring). Quando isso clica, ({ tema }), ({ children }), (props) e ({ tema, children }) viram tudo a mesma coisa vista de ângulos diferentes.

E, em paralelo, vale dar uma revisada em destructuring de objetos no JavaScript puro. Muito do que parece complicado no React é só JS que a gente ainda não internalizou.