Wie kann ich 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 werden in der Benutzeroberfläche angezeigt.
Was wäre der richtige Ansatz, um ein- und mehrzeilige Kommentare innerhalb einer Rendermethode einer Komponente anzuwenden?
reactjs
react-native
meDeepakJain
quelle
quelle
{/* JSX comment*/}
Antworten:
Innerhalb der
render
Methode 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.Weitere Informationen zur Funktionsweise von Kommentaren in JSX finden Sie hier
quelle
//
Kommentaren mit doppelten Schrägstrichen verwendet wurdeHier ist ein weiterer Ansatz, mit dem Sie
//
Kommentare einfügen können:Der Haken hier ist, dass Sie mit diesem Ansatz keinen einzeiligen Kommentar einfügen können. Dies funktioniert beispielsweise nicht:
weil die schließende Klammer
}
als Teil des Kommentars betrachtet wird und daher ignoriert wird, was einen Fehler auslöst.quelle
//
eckigen Klammern eingeschlossen hat.Auf der anderen Seite ist das Folgende ein gültiger Kommentar, der direkt aus einer funktionierenden Anwendung stammt:
Apparantly, wenn im Inneren der spitzen Klammern eines JSX Element, das
//
ist Syntax gültig ist , aber das{/**/}
ist ungültig. Folgende Pausen:quelle
Das ist wie.
quelle
Zusammenfassend lässt sich sagen, dass JSX keine HTML- oder JS-ähnlichen Kommentare unterstützt:
und die einzige Möglichkeit , Kommentare "in" JSX hinzuzufügen, besteht darin, in JS zu entkommen und dort zu kommentieren:
wenn du keinen Unsinn machen willst wie
Wenn Sie einen Kommentarknoten über React erstellen möchten , müssen Sie viel ausgefallener sein und diese Antwort lesen .
quelle
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
Wenn wir Kommentare innerhalb der JSX-Renderlogik verwenden würden:
Bei der Deklaration von Requisiten können einzeilige Kommentare verwendet werden:
Ungültig
Wenn Sie einzeilige oder mehrzeilige Kommentare in JSX verwenden, ohne sie einzuschließen
{ }
, wird der Kommentar auf der Benutzeroberfläche gerendert:quelle
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:
quelle
JSX-Kommentare Syntax: Sie können verwenden
oder
für mehrzeiligen Kommentar. Und auch,
für einzeiligen Kommentar.
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
quelle
quelle
Laut der offiziellen Seite. Dies sind die beiden Möglichkeiten
Zweites Beispiel:
Hier ist der Link: https://reactjs.org/docs/faq-build.html#how-can-i-write-comments-in-jsx
quelle
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 * /:
quelle
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:
JSX-Kommentare für einzeilige und mehrzeilige Kommentare folgen der Konvention
Einzeiliger Kommentar:
Mehrzeilige Kommentare:
quelle
Laut der Dokumentation von React können Sie Kommentare in JSX wie folgt schreiben :
Einzeiliger Kommentar:
Mehrzeilige Kommentare:
quelle