ReactJS: comentários em JSX

Estes dias passei por uma situação engraçada: queria apenas comentar uma parte de um JSX. JSX é a sintaxe utilizada para renderizar HTML do ReactJS. Porém, isso não foi tão simples :)

A primeira tentativa seria fazer como um comentário em HTML:

render(){
   return (
       <div>
          <!-- isso não vai funcionar :) -->
       </div>
    )
}

Porém, rapidamente iremos perceber que isso não funciona :)

A segunda tentativa (já que JSX é meio HTML meio JS) seria tentar:

render(){
   return (
       <div>
          { <-- isso não vai funcionar :) ---> }
       </div>
    )
}

Hum, mas não funcionou :(

Bom, mas aí que está o pulo do gato. Precisamos avisar o JSX que ele tem que renderizar este trecho de código como javascript e não como JSX.

E aí está o motivo do qual temos que usar { }.

render(){
   return (
       <div>
          { /* isso vai funcionar :) */ }
       </div>
    )
}

Neste caso, quando utilizamos as chaves, estamos alternando o contexto entre JSX e JS, e por isso,o comentário agora irá funcionar. Basta lembrar que quando queremos “escrever” algo no JSX utilizamos { nomeDaVariavel }.

Curta o DevPleno no Facebook, se inscreva no canal no YouTube e cadastre seu e-mail para não perder as atualizações. Abraço!