12

Quero saber se é possível comentar um bloco de código dentro do método render() no React, tentei de todas as formas que conheço e nenhuma deles funcionou.

render() {
    return (
      <div className="Events">
        <div className="EventDescription">Multi-Eventos</div>
        <div className="EventHeader">
          <Button onClick={this.addEvent.bind(this)} bsStyle="warning">Adicionar Eventos 
            <FontAwesome name="chevron-down"/>
          </Button>
          // Não funciona
          <!-- Não funciona -->
          /* Não funciona */
          -- Não funciona
        </div>
      </div>
    );
  }

2 Respostas 2

13

Para comentar em jsx, deves colocar chavetas à volta dos comentários, de resto é como fizeste no teu segundo exemplo (/* Não funciona */):

{/* COMENTÁRIO JSX */}
9

Podes ler sobre isto na documentação do React, mas basicamente há 4 tipos diferentes.

Fiz um jsFiddle de exemplo aqui: https://jsfiddle.net/mk50r5qt/

O código é:

var Span = React.createClass({
    render: function() {
        return (
            <span style={{color: this.props.color}}>
                {this.props.text}
            </span>
        );
    }
});


var Hello = React.createClass({
    render: function() {
        return (<div>
            <Span {...this.props} text={'Hello'} />
            {/* comentário entre componentes */}
            <Span {...this.props} text={' World!'} />
        </div>);
    }
});

ReactDOM.render(
    // comentário ao estilo JavaScript
    < Hello /* comentário dentro do componente */ name="World" /*
    comentários de multiplas linhas funcionam também!
    */ color={'blue'}
    /> ,
    document.getElementById('container')
);

#1 - comentários entre componentes:

dentro de JSX, entre componentes a sintaxe é {/* texto aqui */}. A razão das chavetas {} é para interpretar como JavaScript e aí sabemos como comentar.

#2 - comentários fora e antes de componentes:

render: function() {
    return ( 
        // comentário antes do componente contentor...
        <div>

#3 - comentários dentro das tags de componente na mesma linha:

<Hello /* comentário dentro do componente */ name="World" />

#4 - comentários dentro das tags de componente em linhas multiplas:

<Hello name="World"
   /*
      comentários de multiplas linhas funcionam também!
   */ 
   color={'blue'}
/>

http://chenglou.github.io/react/docs/jsx-in-depth.html#comments

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .