ReactJS - come utilizzare i commenti

Question

Non si possono utilizzare commenti all'interno del metodo render in un componente React?

ho le seguenti componenti:

'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 il modo corretto di gestire i commenti?

UPDATE:

Grazie ribalte questo ha funzionato:

{/* whenClicked is a property not an event, per se. */} 

Answer 1

Quindi entro i commenti metodo Render sono ammessi, ma al fine di utilizzarli all'interno JSX bisogna avvolgerli tra parentesi graffe e utilizzare più commenti stile-linea.

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

Si può leggere di più su come il lavoro commenti in JSX here

Answer 2

Ecco un altro approccio che consente di utilizzare // per includere commenti:

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

Il fermo qui è non è possibile includere un commento su una sola riga usando questo approccio. Ad esempio, questa non funziona:

{// your comment cannot be like this} 

perché la parentesi di chiusura } è considerato parte del commento e quindi viene ignorato, che genera un errore.

Answer 3

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

} 
... 

Answer 4

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

Non si può semplicemente utilizzare i commenti HTML all'interno di JSX perché li tratta come nodi DOM:

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

commenti JSX per linea singola e commenti su più righe segue la convenzione

linea singolo commento:

{/* A JSX comment */} 

commenti su più righe:

{/* 
    Multi 
    line 
    comment 
*/} 

Answer 5

D'altra parte, il seguente è un commento valido, tirato direttamente da un'applicazione di lavoro:

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

Apparantly, quando all'interno staffe angolari di un elemento JSX, la sintassi // è valido, ma il {/**/} non è valido. Le seguenti interruzioni:

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