ReactJS: comentários em JSX
Tulio Faria23 de novembro de 2016
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!
Autor
Tulio Faria23 de novembro de 2016