React-Variable in einen String einschließen

Fügen Sie in React einen JavaScript-Ausdruck in geschweifte JSX-Klammern ein, um einen veränderlichen Wert mit Text zu kombinieren. Zum Beispiel verwendet className={type + "Box"} die String-Verkettung, während className={`${type}Box`} ein Template-Literal verwendet. React ist eine JavaScript-Bibliothek, und mit JSX lassen sich solche Ausdrücke in einer markupähnlichen Syntax schreiben.

React-Variable mit String-Verkettung in einen String einfügen

In diesem Beispiel ist type der String "large". Daher verkettet type + "Box" die beiden Werte und ergibt "largeBox". Sind beide Operanden Zahlen, addiert + sie. Verwenden Sie den Ausdruck in einer React-Komponente als Attributwert innerhalb geschweifter JSX-Klammern. Ändert sich type, erhält React beim nächsten Rendern den neu zusammengesetzten Wert. Das folgende ausführbare JavaScript-Beispiel zeigt ausschließlich diese String-Operation; es rendert weder React noch JSX.

Führen Sie dieses Beispiel aus:

const type = "large";
const className = type + "Box";
console.log(className);

largeBox

Mehrere Teile lassen sich mit + verbinden; auch ein Leerzeichen kann als eigener String eingefügt werden. Zum Beispiel setzt firstWord + " " + secondWord genau ein Leerzeichen zwischen die beiden Werte. Ohne dieses ausdrücklich eingefügte Leerzeichen stehen die Wörter direkt nebeneinander. Schreiben Sie in JSX den gesamten Ausdruck in geschweifte Klammern, etwa <h1>{firstWord + " " + secondWord}</h1>. Die Klammern kennzeichnen den JavaScript-Ausdruck und gehören nicht zum resultierenden Text.

Bei wenigen Teilen ist die Verkettung übersichtlich. Bei mehreren Werten, Satzzeichen oder Leerzeichen können wiederholte +-Operatoren den Ausdruck jedoch schwerer lesbar machen. Ein Template-Literal ist eine weitere Möglichkeit, denselben String zu bilden.

React-Variable mit Template-Literalen in einen String einfügen

Ein Template-Literal verwendet Backticks und ${...}, um einen Ausdruck in einen String einzufügen. In JSX setzen Sie das Template-Literal in die geschweiften Ausdrucksklammern des Attributs: className={`${type}Box`}. Ist type auf "large" gesetzt, ergibt der JavaScript-Ausdruck denselben Wert largeBox wie die Verkettung. Diese Schreibweise ist nützlich, wenn ein String mehrere Werte oder Leerzeichen enthält, weil der umgebende Text in einem gut lesbaren Template bleibt. Zeichen zwischen den Platzhaltern werden in das Ergebnis übernommen. Schreiben Sie daher ein Leerzeichen direkt zwischen ${firstName} und ${lastName}, wenn die angezeigten Namen getrennt sein sollen. Auf dieselbe Weise können Sie Satzzeichen oder Bezeichnungen einfügen, etwa ein Komma, einen Doppelpunkt oder eine Einheit. Der Template-Ausdruck ergibt weiterhin einen einzelnen JavaScript-String; er fügt keine JSX-Elemente hinzu und verändert die interpolierten Werte nicht. Im JSX-Text setzen Sie den Ausdruck wie im Überschriftenbeispiel in geschweifte Klammern. Bei einem Attribut wie className steht das Template-Literal stattdessen innerhalb der Attributklammern. Beim Rendern der Komponente erhält React den resultierenden String als Text- oder Attributwert. Fehlt im Ergebnis ein Leerzeichen, prüfen Sie die Zeichen im Template rund um die Platzhalter, bevor Sie die JavaScript-Werte ändern.

Mit const firstName = "Ada" und const lastName = "Lovelace" kann JSX beispielsweise eine Überschrift mit Hello, ${firstName} ${lastName}! als Template-Ausdruck rendern: <h1>{`Hello, ${firstName} ${lastName}!`}</h1>. Die JSX-Klammern um den JavaScript-Ausdruck und die Backticks um das Template-Literal müssen erhalten bleiben. Verwenden Sie die Verkettung für kurze Verbindungen oder ein Template-Literal, wenn die Interpolation einen längeren String leichter lesbar macht. Beide Varianten ergeben gewöhnliche JavaScript-Strings, die React verwenden kann.