JavaScript no JSX com Chaves

O JSX permite que você escreva marcação semelhante a HTML dentro de um arquivo JavaScript, mantendo a lógica de renderização e o conteúdo no mesmo lugar. Às vezes, você vai querer adicionar um pouco de lógica JavaScript ou referenciar uma propriedade dinâmica dentro dessa marcação. Nessa situação, você pode usar chaves no seu JSX para abrir uma janela para o JavaScript.

Passando strings com aspas

Quando você quer passar um atributo de string para o JSX, você o coloca entre aspas simples ou duplas:

Aqui,"https://i.imgur.com/7vQD0fPs.jpg" e "Gregorio Y. Zara"estão sendo passados como strings.

Mas e se você quiser especificar dinamicamente osrcou o textoalt? Você poderiausar um valor do JavaScript substituindo" e "por{ e }:

Observe a diferença entreclassName="avatar", que especifica um nome de classe CSS"avatar"que deixa a imagem redonda, esrc={avatar}que lê o valor da variável JavaScript chamadaavatar. Isso porque as chaves permitem que você trabalhe com JavaScript diretamente na sua marcação!

Usando chaves: Uma janela para o mundo JavaScript

JSX é uma maneira especial de escrever JavaScript. Isso significa que é possível usar JavaScript dentro dele—com chaves{ }. O exemplo abaixo primeiro declara um nome para o cientista,name, depois o incorpora com chaves dentro do<h1>:

Tente alterar o valor dename de 'Gregorio Y. Zara'para'Hedy Lamarr'. Veja como o título da lista muda?

Qualquer expressão JavaScript funcionará entre chaves, incluindo chamadas de função comoformatDate():

Onde usar chaves

Você só pode usar chaves de duas maneiras dentro do JSX:

1. Como textodiretamente dentro de uma tag JSX:<h1>{name}'s To Do List</h1>funciona, mas<{tag}>Gregorio Y. Zara's To Do List</{tag}>não funcionará.
2. Como atributosimediatamente após o sinal de=: src={avatar}lerá a variávelavatar, massrc="{avatar}"passará a string"{avatar}".

Usando “chaves duplas”: CSS e outros objetos no JSX

Além de strings, números e outras expressões JavaScript, você pode até passar objetos no JSX. Objetos também são denotados com chaves, como{ name: "Hedy Lamarr", inventions: 5 }. Portanto, para passar um objeto JS no JSX, você deve envolver o objeto em outro par de chaves:person={{ name: "Hedy Lamarr", inventions: 5 }}.

Você pode ver isso com estilos CSS inline no JSX. O React não exige que você use estilos inline (classes CSS funcionam muito bem na maioria dos casos). Mas quando você precisa de um estilo inline, você passa um objeto para o atributostyle:

Tente alterar os valores debackgroundColor e color.

Você pode realmente ver o objeto JavaScript dentro das chaves quando o escreve assim:

Da próxima vez que você vir{{ e }}no JSX, saiba que não é nada mais do que um objeto dentro das chaves do JSX!

Mais diversão com objetos JavaScript e chaves

Você pode mover várias expressões para um objeto e referenciá-las no seu JSX dentro de chaves:

Neste exemplo, o objeto JavaScriptpersoncontém uma stringnamee um objetotheme:

O componente pode usar esses valores depersonassim:

O JSX é muito minimalista como uma linguagem de template porque permite que você organize dados e lógica usando JavaScript.

Recapitulação

Agora você sabe quase tudo sobre JSX:

• Atributos JSX dentro de aspas são passados como strings.
• Chaves permitem que você traga lógica e variáveis JavaScript para sua marcação.
• Elas funcionam dentro do conteúdo da tag JSX ou imediatamente após=em atributos.
• {{ e }}não é uma sintaxe especial: é um objeto JavaScript inserido dentro das chaves do JSX.