How to comment code block in JSX (React)

Navigation
6

I want to know if it's possible to comment a block of code inside the render () method in React, I've tried all the ways I know and none of them worked. 

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>
    );
  }
    
asked by anonymous 21.11.2016 / 13:43

2 answers

6

To comment on jsx, you should put braces around the comments, otherwise it is as you did in your second example ( /* Não funciona */ ): 

{/* COMENTÁRIO JSX */}
    
21.11.2016 / 13:45
5

You can read about this in React documentation , but basically there are 4 different types.

I did a sample jsFiddle here: link

The code is: 

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 - Component comments:

Within JSX, between components the syntax is {/* texto aqui */} . The reason for the {} keys is to interpret as JavaScript and then know how to comment.

# 2 - Comments off and before components: 

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

# 3 - comments inside the component tags on the same line: 

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

# 4 - comments within component tags in multiple lines: 

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

link

    
21.11.2016 / 17:14
How do you know if a dot (x, y) is within the filled percentage of a pie chart? What happens in the expression "$ a +++ (++ $ a)"?