Come posso usare i commenti all'interno del rendermetodo in un componente React?

Ho il seguente 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;  

I miei commenti vengono visualizzati nell'interfaccia utente.

Quale sarebbe l'approccio giusto per applicare commenti a linea singola e multipla all'interno di un metodo di rendering di un componente?

Pertanto, all'interno del rendermetodo sono consentiti i commenti, ma per poterli utilizzare all'interno di JSX, è necessario avvolgerli tra parentesi graffe e utilizzare i commenti di stile multilinea.

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

Puoi leggere di più su come funzionano i commenti in JSX qui

Ecco un altro approccio che ti consente //di includere i commenti:

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

Il trucco qui è che non puoi includere un commento di una riga usando questo approccio. Ad esempio, questo non funziona:

{// your comment cannot be like this}

perché la parentesi quadra di chiusura }è considerata parte del commento e viene quindi ignorata, il che genera un errore.

D'altra parte, il seguente è un commento valido, estratto direttamente da un'applicazione funzionante:

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

Apparentemente, quando all'interno delle parentesi angolari di un elemento JSX, la //sintassi è valida, ma {/**/}non è valida. Le seguenti interruzioni:

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

Questo è come.

Valido:

...
render() {

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

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

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

}
...

Non valido:

...
render() {

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

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

}
...

Riassumendo, JSX non supporta i commenti, sia html che js:

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

e l'unico modo per aggiungere commenti "in" JSX è in realtà fuggire in JS e commentare lì:

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

se non vuoi fare delle sciocchezze come

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

Infine, se vuoi creare un nodo di commento tramite React, devi andare molto più elaborato, dai un'occhiata a questa risposta .

Oltre alle altre risposte, è anche possibile utilizzare i commenti a riga singola appena prima e dopo l'inizio o la fine di JSX. Ecco un riepilogo completo:

Valido

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

Se dovessimo usare i commenti all'interno della logica di rendering JSX:

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

Quando si dichiarano oggetti di scena, è possibile utilizzare i commenti a riga singola:

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

Non valido

Quando si utilizzano commenti a riga singola o multilinea all'interno di JSX senza includerli { }, il commento verrà trasmesso all'interfaccia utente:

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

Secondo il sito ufficiale. Questi sono i due modi

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

Secondo esempio:

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

Ecco il link: https://reactjs.org/docs/faq-build.html#how-can-i-write-comments-in-jsx

{ 
    // any valid js expression
}

Se ti chiedi perché funziona? è perché tutto ciò che è racchiuso tra parentesi graffe {} è un'espressione javascript,

quindi va bene anche questo:

{ /*
         yet another js expression
*/ }

Sintassi dei commenti JSX: è possibile utilizzare

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

o

{/* 
  your comment 
  in multiple lines
*/} 

per commento a più righe. E anche,

{ 
  //your comment 
} 

per commento a riga singola.

Nota : la sintassi:

{ //your comment } 

non funziona È necessario digitare parentesi graffe in nuove righe.

Le parentesi graffe vengono utilizzate per distinguere tra JSX e JavaScript in un componente React. All'interno delle parentesi graffe, utilizziamo la sintassi dei commenti JavaScript.

Riferimento: clicca qui

Due modi per aggiungere commenti in React Native

1) // (Double Forward Slash) viene utilizzato per commentare solo una riga nel codice nativo di reazione, ma può essere utilizzato solo al di fuori del blocco di rendering. Se vuoi commentare nel blocco di rendering dove usiamo JSX devi usare il secondo metodo.

2) Se vuoi commentare qualcosa in JSX devi usare i commenti JavaScript all'interno delle parentesi graffe come {/ comment here /}. È un normale / * Block Commenti * /, ma deve essere avvolto tra parentesi graffe.

tasti di scelta rapida per / * Blocca commenti * /:

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

I commenti JavaScript in JSX vengono analizzati come testo e visualizzati nella tua app.

Non puoi semplicemente usare i commenti HTML all'interno di JSX perché li tratta come nodi DOM:

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

I commenti JSX per i commenti a riga singola e multilinea seguono la convenzione

Commento a riga singola:

{/* A JSX comment */}

Commenti multilinea:

{/* 
  Multi
  line
  comment
*/}  

Secondo la documentazione di React , puoi scrivere commenti in JSX in questo modo:

Commento su una riga:

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

Commenti multilinea:

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