React-Variable in einen String einschließen

1. React-Variable mithilfe von String-Verkettung in einen String einschließen
2. React-Variable mithilfe von Template-Literalen in einen String einschließen

Heute ist React wahrscheinlich die beste Bibliothek zum Erstellen schneller Webanwendungen mit dynamischen Funktionen. React verwendet eine Templating-Sprache JSX, ähnlich wie HTML; Es hat jedoch viele Vorteile, z. B. die Möglichkeit, JavaScript-Ausdrücke auszuführen, solange sie in geschweiften Klammern eingeschlossen sind.

React-Variable mithilfe von String-Verkettung in einen String einschließen

Es ist möglich, den String dynamisch durch einfache Verkettung zu generieren. Sie können mehrere Strings mit dem einfachen +-Operator oder der concat()-Methode verketten.

Stellen Sie sich beispielsweise vor, Sie möchten eine dynamische Zeichenfolge className generieren. Stellen wir uns ein Beispiel vor, wie ein dynamischer className-Wert mithilfe der Zeichenfolgenverkettung generiert wird:

export default function App() {
  const [type, setType] = useState("large");
  return (
    <div className={type + "Box"}>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Wir initialisieren die Zustandsvariable Typ mit einer großen Zeichenkette. In JSX setzen wir das Attribut className des Elements <div>, indem wir den String-Wert der Variable type (large) und den String Box verketten.

Wenn wir uns das Quell-HTML ansehen, sehen wir, dass die Klasse des Containers largeBox ist, wie es sein sollte.

Wir können die Funktion setType verwenden, um den Wert der Statusvariablen type zu ändern. Der String-Wert von className ändert sich ebenfalls.

Auf diese Weise können Sie den Wert className des Containers dynamisch ändern und so das Erscheinungsbild der Komponente anpassen.

Sie können das gleiche Prinzip verwenden, um mehr als zwei Zeichenfolgen zu verketten. Wenn Sie Leerzeichen zwischen Wörtern benötigen, stellen Sie sicher, dass Sie diese manuell hinzufügen:

<h1>{firstWord + " " + secondWord}</h1>

Hinweis: Um JavaScript-Ausdrücke in JSX auszuführen, müssen wir sie mit geschweiften Klammern umschließen.

Eine Live-Demo dieses Beispiels ist auf CodeSandbox verfügbar, sodass Sie selbst ausprobieren können, wie die Verkettung funktioniert.

React-Variable mithilfe von Template-Literalen in einen String einschließen

Viele Frontends ziehen es vor, elegantere Template-Literale zu verwenden, um Variablen in einem String zu präsentieren. Sie sehen aus wie normale Saiten; Der einzige Unterschied besteht darin, dass wir anstelle von einfachen oder doppelten Anführungszeichen Backticks (``) verwenden, um Template-Literale zu markieren.

Sie ermöglichen es Ihnen auch, Ausdrücke in die Zeichenfolge einzubetten, indem Sie das Dollarzeichen und die geschweiften Klammern verwenden. Diese Funktion wurde in ES6 eingeführt, ist also eine relativ neue Ergänzung zu JavaScript.

Schauen wir uns noch einmal das erste Beispiel an, aber dieses Mal verwenden wir Vorlagenliterale, um eine Variable in den String aufzunehmen:

export default function App() {
  const [type, setType] = useState("large");
  return (
    <div className={`${type}Box`}>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

In diesem Fall wird die type-Variable durch ihren String-Wert ersetzt. Letztendlich haben wir immer noch einen largeBox-String-Wert für das className-Attribut.

Vorlagenliterale sind oft besser lesbar als einfache Verkettungen. Beispielsweise ist es viel einfacher, Leerzeichen zwischen Wörtern einzufügen, wenn Sie viele Variablen in der Zeichenfolge haben.