Usando expressões JavaScript no JSX

Esperemos que agora seja óbvio que o JSX é apenas açúcar sintático que é convertido em JavaScript. Mas o que acontece quando você deseja intercalar o código JavaScript real dentro do JSX? Para escrever uma expressão de JavaScript dentro do JSX, você terá que cercar o código JavaScript com {}.

No código React / JSX abaixo, estou misturando expressões de JavaScript (por exemplo, 2 + 2), cercado por {} entre o JSX que eventualmente será avaliado pelo JavaScript.

source code

A transformação JSX resultará no seguinte:

var label = '2 + 2';
var inputType = 'input';

var reactNode = React.createElement(
  'label',
  null,
  label,
  ' = ',
  React.createElement('input', { type: inputType, value: 2 + 2 })
);

ReactDOM.render(reactNode, document.getElementById('app1'));

Uma vez que este código é analisado pela engine do JavaScript (ou seja, um navegador), as expressões de JavaScript são avaliadas e o HTML resultante será assim:

<div id="app1">
    <label data-reactid=".0"><span data-reactid=".0.0">2 + 2</span><span data-reactid=".0.1"> = </span><input type="input" value="4" data-reactid=".0.2"></label>
</div>

Nada disso é complicado quando você percebe que os colchetes basicamente escapam do JSX. Os suportes {} simplesmente dizem ao JSX que o conteúdo é JavaScript, então deixe-o em paz para que possa ser analisado por um mecanismo de JavaScript (por exemplo, 2 + 2). Observe que {} podem ser usados em qualquer lugar entre as expressões JSX, desde que o resultado seja JavaScript válido.

Notas

• Se você tiver que escapar os chaves (ou seja, você quer chaves em uma string) use {'{}'}.