ReactJS - Wie verwende ich Kommentare?

186

Wie kann ich Kommentare innerhalb der renderMethode 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;  

Geben Sie hier die Bildbeschreibung ein

Meine Kommentare werden in der Benutzeroberfläche angezeigt.

Was wäre der richtige Ansatz, um ein- und mehrzeilige Kommentare innerhalb einer Rendermethode einer Komponente anzuwenden?

meDeepakJain
quelle
3
Gute Frage mit einer einzigen Antwort. Lassen Sie sich nicht von 12 Antworten täuschen! Sie reden alle über dasselbe:{/* JSX comment*/}
Jack Miller

Antworten:

269

Innerhalb der renderMethode sind Kommentare zulässig. Um sie jedoch in JSX verwenden zu können, müssen Sie sie in geschweifte Klammern setzen und mehrzeilige Kommentare verwenden.

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

Weitere Informationen zur Funktionsweise von Kommentaren in JSX finden Sie hier

Henrik Andersson
quelle
Ich weiß nicht warum, aber es gibt mir immer das Gefühl eines schlechten Codes oder eines Fehlers im Code. Mit anderen Worten, es scheint, als würde das Kommentieren in meinem Code nicht auf diese Weise angepasst. Ich bin mir nicht sicher, ob ich von //Kommentaren mit doppelten Schrägstrichen verwendet wurde
adi
2
Und so etwas wie <div> </ div> {/ * comment * /} erzeugt Fehler. Kommentar muss in einer neuen Zeile stehen.
Amir Shabani
46

Hier ist ein weiterer Ansatz, mit dem Sie //Kommentare einfügen können:

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

Der Haken hier ist, dass Sie mit diesem Ansatz keinen einzeiligen Kommentar einfügen können. Dies funktioniert beispielsweise nicht:

{// your comment cannot be like this}

weil die schließende Klammer }als Teil des Kommentars betrachtet wird und daher ignoriert wird, was einen Fehler auslöst.

Anandharshan
quelle
7
@LukeCarelsen Es funktioniert tatsächlich, weil er die //eckigen Klammern eingeschlossen hat.
Martin Dawson
21

Auf der anderen Seite ist das Folgende ein gültiger Kommentar, der direkt aus einer funktionierenden Anwendung stammt:

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

Apparantly, wenn im Inneren der spitzen Klammern eines JSX Element, das //ist Syntax gültig ist , aber das {/**/}ist ungültig. Folgende Pausen:

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

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

}
...
Mehdi Raash
quelle
10

Zusammenfassend lässt sich sagen, dass JSX keine HTML- oder JS-ähnlichen Kommentare unterstützt:

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

und die einzige Möglichkeit , Kommentare "in" JSX hinzuzufügen, besteht darin, in JS zu entkommen und dort zu kommentieren:

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

wenn du keinen Unsinn machen willst wie

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

Wenn Sie einen Kommentarknoten über React erstellen möchten , müssen Sie viel ausgefallener sein und diese Antwort lesen .

YakovL
quelle
7

Neben den anderen Antworten ist es auch möglich, einzeilige Kommentare kurz vor und nach dem Beginn oder Ende von JSX zu verwenden. Hier ist eine vollständige Zusammenfassung:

Gültig

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

Wenn wir Kommentare innerhalb der JSX-Renderlogik verwenden würden:

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

Bei der Deklaration von Requisiten können einzeilige Kommentare verwendet werden:

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

Ungültig

Wenn Sie einzeilige oder mehrzeilige Kommentare in JSX verwenden, ohne sie einzuschließen { }, wird der Kommentar auf der Benutzeroberfläche gerendert:

(
  <div>
    // invalid comment, renders in the UI
  </div>
)
Divyanshu Maithani
quelle
4
{ 
    // any valid js expression
}

Wenn Sie sich fragen, warum funktioniert es? weil alles, was sich in geschweiften Klammern {} befindet, ein Javascript-Ausdruck ist,

Das ist also auch in Ordnung:

{ /*
         yet another js expression
*/ }
Bar Horing
quelle
{//} das funktioniert nicht, ich habe überprüft, können Sie bitte angeben, ich versuche es innerhalb der Renderfunktion zu kommentieren, dies funktioniert nur, wenn nach der geschweiften Klammer eine neue Linie steht und der gleiche Fall für die schließende geschweifte Klammer (Es sollte in der neuen Zeile sein),
IB
4

JSX-Kommentare Syntax: Sie können verwenden

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

oder

{/* 
  your comment 
  in multiple lines
*/} 

für mehrzeiligen Kommentar. Und auch,

{ 
  //your comment 
} 

für einzeiligen Kommentar.

Hinweis : Die Syntax:

{ //your comment } 

funktioniert nicht Sie müssen geschweifte Klammern in neue Zeilen eingeben.

Geschweifte Klammern werden verwendet, um in einer React-Komponente zwischen JSX und JavaScript zu unterscheiden. In geschweiften Klammern verwenden wir die JavaScript-Kommentarsyntax.

Referenz: hier klicken

Yaksh
quelle
Sind Sie sicher, dass die einzeilige Kommentarsyntax gültig ist? Ihre Referenz zeigt es nicht.
Tomáš Hübelbauer
Ja. Ich bin ziemlich sicher. Ich konnte keine Referenz dafür finden, aber ich habe es selbst getestet. Wie ich in der Antwort erwähnt habe, können wir in JSX auch einzeilige Javascript-Syntax mit geschweiften Klammern verwenden.
Yaksh
4

{/*
   <Header />
   <Content />
   <MapList />
   <HelloWorld />
*/}

harun ugur
quelle
3

Zwei Möglichkeiten, Kommentare in React Native hinzuzufügen

1) // (Double Forward Slash) wird verwendet, um nur eine einzelne Zeile im nativen Reaktionscode zu kommentieren, kann jedoch nur außerhalb des Renderblocks verwendet werden. Wenn Sie in einem Renderblock kommentieren möchten, in dem wir JSX verwenden, müssen Sie die 2. Methode verwenden.

2) Wenn Sie etwas in JSX kommentieren möchten, müssen Sie JavaScript-Kommentare in geschweiften Klammern wie {/ comment here /} verwenden. Es ist ein regulärer / * Block Comments * /, muss aber in geschweifte Klammern eingeschlossen werden.

Tastenkombinationen für / * Kommentare blockieren * /:

Ctrl + / on Windows + Linux.
Cmd + / on macOS.
Ramesh R.
quelle
Hallo Ramesh R, können Sie sicherstellen, dass Sie beim Einrichten von Code die Einrückung nicht durcheinander bringen - wie bei stackoverflow.com/revisions/57358471/3 ? danke
Yvette
2

JavaScript-Kommentare in JSX werden als Text analysiert und in Ihrer App angezeigt.

Sie können HTML-Kommentare nicht einfach in JSX verwenden, da sie als DOM-Knoten behandelt werden:

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

JSX-Kommentare für einzeilige und mehrzeilige Kommentare folgen der Konvention

Einzeiliger Kommentar:

{/* A JSX comment */}

Mehrzeilige Kommentare:

{/* 
  Multi
  line
  comment
*/}  
Venkatesh Manohar
quelle
2

Laut der Dokumentation von React können Sie Kommentare in JSX wie folgt schreiben :

Einzeiliger Kommentar:

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

Mehrzeilige Kommentare:

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