ReactJS - ¿Cómo usar los comentarios?


192

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

ingrese la descripción de la imagen aquí

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?


3
Buena pregunta con una sola respuesta. ¡No te dejes engañar por 12 respuestas! Todos hablan de lo mismo:{/* JSX comment*/}
Jack Miller

Respuestas:


276

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í


No sé por qué, pero siempre me da una sensación de mal código o algo mal en el código. en otras palabras, parece que comentar no se está ajustando en mi código de esta manera. No estoy seguro de si me usaron los //comentarios de estilo de doble barra
adi

2
Y algo como <div> </div> {/ * comment * /} crea un error. el comentario debe estar en una nueva línea.
Amir Shabani

48

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.


77
@LukeCarelsen Realmente funciona porque encerró los //corchetes.
Martin Dawson

22

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

11

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

}
...

11

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 .


7

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



5
{ 
    // 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
*/ }

{//} esto no funciona, lo he comprobado, ¿pueden especificar? Estoy tratando de comentarlo dentro de la función de renderizado, esto solo funciona si hay una nueva línea después de la llave y el mismo caso para la llave de cierre (debería estar en la nueva línea),
IB

5

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í


¿Está seguro de que la sintaxis del comentario de una sola línea es válida? Su referencia no lo muestra.
Tomáš Hübelbauer

Si. Estoy bastante seguro. No pude encontrar una referencia para ello, pero lo probé yo mismo. Además, como mencioné en la respuesta, podemos usar la sintaxis de una sola línea de JavaScript en JSX usando llaves.
yaksh

4

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.

hola Ramesh R, ¿puedes asegurarte de que cuando estás haciendo ediciones de código no estropees la sangría, como esta stackoverflow.com/revisions/57358471/3 ? gracias
Yvette

3

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
*/}  

3

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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.