ReactJS - Verwendung von Kommentaren

Question

Können Sie keine Kommentare innerhalb der render-Methode in einer React-Komponente verwenden?

Ich habe die folgende Komponente:

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

Meine Kommentare zeigen in der Benutzeroberfläche auf.

Wie wäre der richtige Umgang mit Kommentaren?

UPDATE:

Dank limelights dies gearbeitet:

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

Answer 1

So innerhalb der Render-Methode Kommentare sind erlaubt, aber um sie innerhalb von JSX zu verwenden, müssen Sie diese in Klammern wickeln und Multi verwenden -line Stil Kommentare.

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

Sie mehr darüber, wie Kommentare Arbeit in JSX lesen here

Answer 2

ist hier ein anderer Ansatz, den Sie // verwenden können Kommentare enthalten:

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

Der Haken dabei ist, dass Sie nicht mit einschließen kann Ein einzeiliger Kommentar, der diesen Ansatz verwendet. Zum Beispiel funktioniert das nicht:

{// your comment cannot be like this} 

weil der Schließbügel } wird als Teil des Kommentars sein und wird somit ignoriert, was einen Fehler auslöst.

Answer 3

Dies ist wie.

Gültig:

... 
render() { 

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

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

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

} 
... 

Ungültig:

... 
render() { 

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

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

} 
... 

Answer 4

JavaScript Kommentare in JSX als Text analysiert erhalten und in der App angezeigt.

Sie können innerhalb von JSX nicht nur Kommentare HTML verwenden, weil es sie als DOM-Knoten behandelt:

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

JSX Kommentare für einzeilige und mehrzeilige Kommentare folgt der Konvention

Einzeiliger Kommentar:

{/* A JSX comment */} 

mehrzeilige Kommentare:

{/* 
    Multi 
    line 
    comment 
*/} 

Answer 5

Auf der anderen Seite, ist das Folgende eines gültigen Kommentars, zog direkt von einer Arbeitsanwendung:

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

Apparantly, wenn innen die spitzen Klammern eines JSX Elements, die // Syntax gültig sind, aber die {/**/} ist ungültig. Die folgenden Pausen:

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