ReactJS: comentários em JSX

Escrito por

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:

1render(){
2 return (
3 <div>
4 <!-- isso não vai funcionar :) -->
5 </div>
6 )
7}

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

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

1render(){
2 return (
3 <div>
4 { /\* isso não vai funcionar :) \*/ }
5 </div>
6 )
7}

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 { }.

1render(){
2 return (
3 <div>
4 { /\* isso não vai funcionar :) \*/ }
5 </div>
6 )
7}

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 }.

Deixe suas dúvidas e sugestões nos comentários. 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!

Evolua mais rápido

Junte-se a milhares de desenvolvedores no nosso time de alunos premium e alcance mais rápido o próximo nível da sua carreira.

Ver cursos Premium