Zugang Requisiten innerhalb von Anführungszeichen in React JSX
In JSX, wie du auf einen Wert von props
von innen eine zitierte Attribut Wert?
Beispiel:
<img className="image" src="images/{this.props.image}" />
Die resultierende HTML-Ausgabe ist:
<img class="image" src="images/{this.props.image}">
Du musst angemeldet sein, um einen Kommentar abzugeben.
Reagieren (oder JSX) nicht unterstützt variable interpolation in einem Attribut-Wert, aber Sie können jede Art von JS-Ausdruck in geschweiften Klammern, wie die gesamte Attribut-Wert, so funktioniert dies:
Wenn Sie möchten, verwenden Sie das es6 template-Literale, müssen Sie Klammern um die Teilstriche sowie:
Wenn Sie mit JSX mit Harmonie, Sie könnten dies tun:
Hier, Sie schreiben den Wert
src
als Ausdruck.Anstatt das hinzufügen von Variablen und strings verwenden, können Sie das ES6 template strings!
Hier ist ein Beispiel:
Als für alle anderen JavaScript-Komponenten, die innerhalb JSX, Vorlage verwenden Zeichenfolgen, die in der geschweiften Klammer. Zu "injizieren" eine variable ein Dollarzeichen gefolgt von geschweiften Klammern, der die variable enthält, die Sie möchten, zu injizieren. Zum Beispiel:
Beste Praktiken zum hinzufügen von getter-Methode für die :
Dann , wenn Sie mehr Logik später können Sie pflegen Sie den code reibungslos.
Für Menschen auf der Suche nach Antworten w.r.t auf 'Karte' - Funktion und dynamische Daten, hier ist ein funktionierendes Beispiel.
Diese gibt die URL als "http://examole.com/randomview/images/2/dp_pics/182328.jpg" (random Beispiel)
Hinweis: reagieren Sie können javascript-Ausdruck in geschweifte Klammer. Wir können diese Eigenschaft verwenden, in diesem Beispiel.
Hinweis: geben Sie einen Blick auf die unten Beispiel:
Hier ist die Beste Option für Dynamische Klassennamen oder Requisiten , nur einige Verkettung wie wir in Javascript.
classnames
- Paket zur Erstellung von dynamischen Klassennamen