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;  

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?

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

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.

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

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

}
...

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 .

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

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

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

Laut der offiziellen Seite. Dies sind die beiden Möglichkeiten

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

Zweites Beispiel:

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

Hier ist der Link: https://reactjs.org/docs/faq-build.html#how-can-i-write-comments-in-jsx

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.

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

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>