JavaScript in JSX mit geschweiften Klammern

JSX ermöglicht es dir, HTML-ähnliches Markup in einer JavaScript-Datei zu schreiben und so Rendering-Logik und Inhalt an einem Ort zu halten. Manchmal möchtest du ein wenig JavaScript-Logik hinzufügen oder auf eine dynamische Eigenschaft innerhalb dieses Markups verweisen. In diesem Fall kannst du geschweifte Klammern in deinem JSX verwenden, um ein Fenster zu JavaScript zu öffnen.

Übergeben von Strings mit Anführungszeichen

Wenn du ein String-Attribut an JSX übergeben möchtest, setzt du es in einfache oder doppelte Anführungszeichen:

Hier werden"https://i.imgur.com/7vQD0fPs.jpg"und"Gregorio Y. Zara"als Strings übergeben.

Aber was, wenn du densrcoderaltDu kannsteinen Wert aus JavaScript verwenden, indem du"und"durch{und}ersetzt:

Beachte den Unterschied zwischenclassName="avatar", was einen CSS-Klassennamen"avatar"angibt, der das Bild rund macht, undsrc={avatar}, das den Wert der JavaScript-Variable namensavatarausliest. Das liegt daran, dass geschweifte Klammern es dir ermöglichen, direkt in deinem Markup mit JavaScript zu arbeiten!

Verwendung von geschweiften Klammern: Ein Fenster in die JavaScript-Welt

JSX ist eine besondere Art, JavaScript zu schreiben. Das bedeutet, dass es möglich ist, JavaScript darin zu verwenden – mit geschweiften Klammern{ }. Das folgende Beispiel deklariert zuerst einen Namen für den Wissenschaftler,name, und bettet ihn dann mit geschweiften Klammern in das<h1>ein:

Versuche, den Wert vonname von 'Gregorio Y. Zara'in'Hedy Lamarr'zu ändern. Siehst du, wie sich der Listen-Titel ändert?

Jeder JavaScript-Ausdruck funktioniert zwischen geschweiften Klammern, einschließlich Funktionsaufrufen wieformatDate():

Wo geschweifte Klammern verwendet werden können

Du kannst geschweifte Klammern innerhalb von JSX nur auf zwei Arten verwenden:

1. Als Textdirekt innerhalb eines JSX-Tags:<h1>{name}'s To Do List</h1>funktioniert, aber<{tag}>Gregorio Y. Zara's To Do List</{tag}>wird nicht funktionieren.
2. Als Attributeunmittelbar nach dem=Zeichen:src={avatar}liest die Variableavatar, abersrc="{avatar}"übergibt den String"{avatar}".

Verwendung von „doppelten geschweiften Klammern“: CSS und andere Objekte in JSX

Zusätzlich zu Strings, Zahlen und anderen JavaScript-Ausdrücken kannst du sogar Objekte in JSX übergeben. Objekte werden ebenfalls mit geschweiften Klammern gekennzeichnet, wie{ name: "Hedy Lamarr", inventions: 5 }. Um daher ein JS-Objekt in JSX zu übergeben, musst du das Objekt in ein weiteres Paar geschweifter Klammern einwickeln:person={{ name: "Hedy Lamarr", inventions: 5 }}.

Du könntest dies bei Inline-CSS-Stilen in JSX sehen. React verlangt nicht, dass du Inline-Stile verwendest (CSS-Klassen funktionieren in den meisten Fällen hervorragend). Aber wenn du einen Inline-Stil benötigst, übergibst du ein Objekt an dasstyleAttribut:

Versuchen Sie, die Werte vonbackgroundColorundcolorzu ändern.

Das JavaScript-Objekt innerhalb der geschweiften Klammern wird deutlich sichtbar, wenn man es so schreibt:

Wenn Sie das nächste Mal{{und}}in JSX sehen, wissen Sie, dass es nichts anderes ist als ein Objekt innerhalb der JSX-geschweiften Klammern!

Mehr Spaß mit JavaScript-Objekten und geschweiften Klammern

Sie können mehrere Ausdrücke in ein Objekt packen und innerhalb Ihrer JSX in geschweiften Klammern darauf verweisen:

In diesem Beispiel enthält dasperson-JavaScript-Objekt einenname-String und eintheme-Objekt:

Die Komponente kann diese Werte auspersonwie folgt verwenden:

JSX ist als Template-Sprache sehr minimalistisch, da es Ihnen erlaubt, Daten und Logik mit JavaScript zu organisieren.

Zusammenfassung

Jetzt wissen Sie fast alles über JSX:

• JSX-Attribute innerhalb von Anführungszeichen werden als Strings übergeben.
• Geschweifte Klammern ermöglichen es, JavaScript-Logik und Variablen in Ihr Markup einzubringen.
• Sie funktionieren innerhalb des JSX-Tag-Inhalts oder direkt nach=in Attributen.
• {{und}}ist keine spezielle Syntax: Es ist ein JavaScript-Objekt, das in JSX-geschweiften Klammern steckt.