¿Cómo puedo usar comentarios dentro del rendermétodo en un componente React?

Tengo el siguiente 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;  

Mis comentarios están apareciendo en la interfaz de usuario.

¿Cuál sería el enfoque correcto para aplicar comentarios de línea única y múltiple dentro de un método de representación de un componente?

Entonces, dentro del rendermétodo, los comentarios están permitidos, pero para usarlos dentro de JSX, debe envolverlos entre llaves y usar comentarios de estilo de varias líneas.

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

Puede leer más sobre cómo funcionan los comentarios en JSX aquí

Aquí hay otro enfoque que le permite utilizar //para incluir comentarios:

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

El problema aquí es que no puede incluir un comentario de una línea utilizando este enfoque. Por ejemplo, esto no funciona:

{// your comment cannot be like this}

porque el corchete de cierre }se considera parte del comentario y, por lo tanto, se ignora, lo que arroja un error.

Por otro lado, el siguiente es un comentario válido, extraído directamente de una aplicación en funcionamiento:

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

Aparentemente, cuando está dentro de los corchetes angulares de un elemento JSX, la //sintaxis es válida, pero {/**/}no es válida. Los siguientes descansos:

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

Así es como.

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, JSX no admite comentarios, ya sea html-like o js-like:

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

y la única forma de agregar comentarios "en" JSX es escapar a JS y comentar allí:

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

si no quieres hacer tonterías como

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

Finalmente, si desea crear un nodo de comentarios a través de React, debe ser mucho más elegante, consulte esta respuesta .

Además de las otras respuestas, también es posible usar comentarios de una sola línea justo antes y después de que JSX comience o termine. Aquí hay un resumen completo:

Válido

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

Si tuviéramos que usar comentarios dentro de la lógica de representación JSX:

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

Al declarar accesorios, se pueden usar comentarios de una sola línea:

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

Inválido

Cuando se usan comentarios de una sola línea o de varias líneas dentro de JSX sin envolverlos { }, el comentario se representará en la interfaz de usuario:

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

Según el sitio oficial. Estas son las dos formas

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

Segundo ejemplo

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

Aquí está el enlace: https://reactjs.org/docs/faq-build.html#how-can-i-write-comments-in-jsx

{ 
    // any valid js expression
}

Si te preguntas por qué funciona es porque todo lo que está dentro de las llaves {} es una expresión de JavaScript,

así que esto también está bien:

{ /*
         yet another js expression
*/ }

Sintaxis de comentarios JSX: puede usar

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

o

{/* 
  your comment 
  in multiple lines
*/} 

para múltiples líneas de comentarios. Y también,

{ 
  //your comment 
} 

para comentarios de una sola línea.

Nota : la sintaxis:

{ //your comment } 

no funciona Necesita escribir llaves en nuevas líneas.

Las llaves se usan para distinguir entre JSX y JavaScript en un componente React. Dentro de las llaves, usamos la sintaxis de comentarios de JavaScript.

Referencia: haga clic aquí

Dos formas de agregar comentarios en React Native

1) // (Double Forward Slash) se usa para comentar solo una línea en el código nativo de reacción, pero solo se puede usar fuera del bloque de representación. Si desea comentar en el bloque de representación donde usamos JSX, debe usar el segundo método.

2) Si desea comentar algo en JSX, debe usar comentarios de JavaScript dentro de llaves entre {/ comment here /}. Es un / * Bloque Comentarios * / normal, pero debe envolverse entre llaves.

teclas de acceso directo para / * Bloquear comentarios * /:

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

Los comentarios de JavaScript en JSX se analizan como texto y se muestran en su aplicación.

No puede simplemente usar comentarios HTML dentro de JSX porque los trata como nodos DOM:

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

Los comentarios JSX para comentarios de línea única y multilínea siguen la convención

Comentario de una sola línea:

{/* A JSX comment */}

Comentarios multilínea:

{/* 
  Multi
  line
  comment
*/}  

De acuerdo con la documentación de React , puede escribir comentarios en JSX de la siguiente manera:

Comentario de una línea:

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

Comentarios de varias líneas:

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