Como posso usar comentários dentro do rendermétodo em um componente React?

Eu tenho o seguinte componente:

'use strict';
 var React = require('react'),
   Button = require('./button'),
   UnorderedList = require('./unordered-list');

class Dropdown extends React.Component{
  constructor(props) {
    super(props);
  }
  handleClick() {
    alert('I am click here');
  }

  render() {
    return (
      <div className="dropdown">
        // whenClicked is a property not an event, per se.
        <Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button>
        <UnorderedList />
      </div>
    )
  }
}

module.exports = Dropdown;  

Meus comentários estão aparecendo na interface do usuário.

Qual seria a abordagem correta para aplicar comentários de uma e várias linhas dentro do método de renderização de um componente?

Portanto, dentro do rendermétodo, os comentários são permitidos, mas para usá-los no JSX, você deve envolvê-los entre chaves e usar comentários no estilo de várias linhas.

<div className="dropdown">
    {/* whenClicked is a property not an event, per se. */}
    <Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button>
    <UnorderedList />
</div>

Você pode ler mais sobre como os comentários funcionam no JSX aqui

Aqui está outra abordagem que permite que você use //para incluir comentários:

return (
  <div>
    <div>
      {
        // Your comment goes in here.
      }
    </div>
    {
      // Note that comments using this style must be wrapped in curly braces!
    }
  </div>
);

O problema aqui é que você não pode incluir um comentário de uma linha usando essa abordagem. Por exemplo, isso não funciona:

{// your comment cannot be like this}

porque o colchete de fechamento }é considerado parte do comentário e, portanto, é ignorado, o que gera um erro.

Por outro lado, o seguinte é um comentário válido, extraído diretamente de um aplicativo em funcionamento:

render () {
    return <DeleteResourceButton
            //confirm
            onDelete={this.onDelete.bind(this)}
            message="This file will be deleted from the server."
           />
}

Aparentemente, quando dentro dos colchetes angulares de um elemento JSX, a //sintaxe é válida, mas {/**/}inválida. Os seguintes intervalos:

render () {
    return <DeleteResourceButton
            {/*confirm*/}
            onDelete={this.onDelete.bind(this)}
            message="This file will be deleted from the server."
           />
}

É assim.

Válido:

...
render() {

  return (
    <p>
       {/* This is a comment, one line */}

       {// This is a block 
        // yoohoo
        // ...
       }

       {/* This is a block 
         yoohoo
         ...
         */
       }
    </p>
  )

}
...

Inválido:

...
render() {

  return (
    <p>
       {// This is not a comment! oops! }

       {//
        Invalid comment
       //}
    </p>
  )

}
...

Para resumir, o JSX não suporta comentários, como html ou js:

<div>
    /* This will be rendered as text */
    // as well as this
    <!-- While this will cause compilation failure -->
</div>

e a única maneira de adicionar comentários "em" JSX é, na verdade, escapar para JS e comentar lá:

<div>
    {/* This won't be rendered */}
    {// just be sure that your closing bracket is out of comment
    }
</div>

se você não quiser fazer alguma bobagem como

<div style={{display:'none'}}>
    actually, there are other stupid ways to add "comments"
    but cluttering your DOM is not a good idea
</div>

Por fim, se você deseja criar um nó de comentários via React, precisa ser muito mais sofisticado, confira esta resposta .

Além das outras respostas, também é possível usar comentários de linha única antes e depois do JSX começar ou terminar. Aqui está um resumo completo:

Válido

(
  // this is a valid comment
  <div>
    ...
  </div>
  // this is also a valid comment
  /* this is also valid */
)

Se usarmos comentários dentro da lógica de renderização JSX:

(
  <div>
    {/* <h1>Valid comment</h1> */}
  </div>
)

Ao declarar adereços, comentários de linha única podem ser usados:

(
  <div
    className="content" /* valid comment */
    onClick={() => {}} // valid comment
  >
    ...
  </div>
)

Inválido

Ao usar comentários de linha única ou multilinha dentro do JSX sem envolvê-los { }, o comentário será renderizado para a interface do usuário:

(
  <div>
    // invalid comment, renders in the UI
  </div>
)

Segundo o site oficial. Estas são as duas maneiras

<div>
  {/* Comment goes here */}
  Hello, {name}!
</div>

Segundo exemplo:

<div>
    {/* It also works 
    for multi-line comments. */}
    Hello, {name}! 
</div>

Aqui está o link: https://reactjs.org/docs/faq-build.html#how-can-i-write-comments-in-jsx

{ 
    // any valid js expression
}

Se você se pergunta por que isso funciona? é porque tudo o que está dentro de chaves {} é uma expressão javascript,

então isso está bem também:

{ /*
         yet another js expression
*/ }

Sintaxe dos comentários JSX: você pode usar

{/** 
  your comment 
  in multiple lines
  for documentation 
**/} 

ou

{/* 
  your comment 
  in multiple lines
*/} 

para comentário de várias linhas. E também,

{ 
  //your comment 
} 

para comentário de linha única.

Nota : A sintaxe:

{ //your comment } 

não funciona Você precisa digitar chaves entre novas linhas.

Chaves entre dentes são usadas para distinguir entre JSX e JavaScript em um componente React. Dentro de chaves, usamos a sintaxe de comentário JavaScript.

Referência: clique aqui

Duas maneiras de adicionar comentários no React Native

1) // (Double Forward Slash) é usado para comentar apenas uma linha no código nativo de reação, mas só pode ser usado fora do bloco de renderização. Se você quiser comentar no bloco de renderização onde usamos o JSX, é necessário usar o segundo método.

2) Se você quiser comentar algo em JSX, precisará usar comentários JavaScript dentro de chaves Curly como {/ comment here /}. É um / * Bloco Comentários * / regular, mas precisa ser envolto em chaves.

teclas de atalho para / * Bloquear Comentários * /:

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

Os comentários de JavaScript no JSX são analisados ​​como texto e são exibidos no seu aplicativo.

Você não pode simplesmente usar comentários HTML dentro do JSX, porque os trata como nós DOM:

render() {
  return (
    <div>
      <!-- This doesn't work! -->
    </div>
  )
}

Comentários JSX para comentários de linha única e multilinha seguem a convenção

Comentário de linha única:

{/* A JSX comment */}

Comentários multilinhas:

{/* 
  Multi
  line
  comment
*/}  

De acordo com a documentação do React , você pode escrever comentários em JSX da seguinte forma:

Comentário de uma linha:

<div>
  {/* Comment goes here */}
  Hello, {name}!
</div>

Comentários em várias linhas:

<div>
  {/* It also works 
  for multi-line comments. */}
  Hello, {name}! 
</div>