Übersicht

Die <Static>-Komponente wird verwendet, um Satzfragmentierung und wiederverwendbare Inhalte zu handhaben, ohne dabei Kongruenz, Konjugation und Änderungen der Wortstellung zu beeinträchtigen. Im folgenden Beispiel werden zwei separate Übersetzungen erstellt: „The beautiful boy plays with the ball“ und „The beautiful girl plays with the ball“.

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}

<T>
  Das schöne <Static>{getSubject(gender)}</Static> spielt mit dem Ball.
</T>

Die <Static>-Komponente weist das CLI-Tool an, einen Funktionsaufruf aufzulösen und alle möglichen Inhalte zu katalogisieren, die von dieser Funktion zurückgegeben werden, wobei jede return-Anweisung so behandelt wird, als wäre sie von einer <T>-Komponente umschlossen.

Weitere Informationen finden Sie in den Release Notes zu gt-next@6.8.0.

Referenz

Props

Beschreibung

Rückgabewert

React.JSX.Element, das den gerenderten Inhalt des Funktionsaufrufs enthält, wobei jedes mögliche Ergebnis einen separaten Translation Entry erzeugt.

Verhalten

Analyse zur Build-Zeit

Während des Build-Prozesses analysiert das CLI-Tool (Command-Line-Interface) Funktionen, die in <Static>-Komponenten eingebettet sind, und erzeugt separate Übersetzungseinträge für jeden möglichen Rückgabewert. Dies ermöglicht eine korrekte Behandlung von Grammatik und Wortstellung in verschiedenen Sprachen.

Funktionsanforderungen

Funktionen, die in <Static>-Komponenten verwendet werden, müssen statische Inhalte zurückgeben, die zur Build-Zeit ermittelbar sind. Die unterstützte Syntax umfasst:

• String-, Zahlen- und boolesche Literale
• JSX-Ausdrücke mit geschachtelten <Static>- und <Var>-Komponenten
• Ternäre Operatoren
• Bedingte Anweisungen (if/else)
• Aufrufe anderer statischer Funktionen

Beispiele

Grundlegende Verwendung

Verwende <Static>, um dynamische Inhalte zu verarbeiten, die sich auf die Satzstruktur auswirken.

import { T, Static } from 'gt-next';

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}

export default function Example({ gender }) {
  return (
    <T>
      Das <Static>{getSubject(gender)}</Static> ist schön.
    </T>
  );
}

Dadurch entstehen zwei Übersetzungseinträge:

• "Der Junge ist hübsch"
• "Das Mädchen ist hübsch"

Mit Variablen

Kombinieren Sie <Static> mit <Var> für dynamische Inhalte in Rückgabewerten statischer Funktionen.

import { T, Static, Var } from 'gt-next';

function getGreeting(title) {
  return (
    <>
      Hallo, <Static>{getTitle(title)}</Static>. Wie geht es Ihnen, <Var>{name}</Var>?
    </>
  );
}

export default function Greeting({ title, name }) {
  return (
    <T>
      <Static>{getGreeting(title)}</Static>
    </T>
  );
}

Mehrere <Static>-Komponenten

Sei vorsichtig, wenn du mehrere <Static>-Komponenten verwendest, da sie die Anzahl der Übersetzungseinträge vervielfachen.

import { T, Static } from 'gt-next';

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}

function getObject(toy) { 
  return toy === "ball" ? "ball" : "crayon"
}

export default function PlayExample({ gender, toy }) {
  return (
    <T>
      <Static>{getSubject(gender)}</Static> spielt mit dem <Static>{getObject(toy)}</Static>.
    </T>
  );
}

Dies erzeugt vier Übersetzungseinträge (2 × 2 Kombinationen):

• "Junge spielt mit dem Ball"
• "Junge spielt mit dem Wachsmalstift"
• "Mädchen spielt mit dem Ball"
• "Mädchen spielt mit dem Wachsmalstift"

Unterstützte Funktions-Syntax

function getExamples(key) {
  switch (key) {
    case "literals":
      if (condition1) {
        return "Der Junge"
      } else if (condition2) {
        return 22
      } else {
        return true
      }
    case "jsx":
      return (
        <>
          Hallo, <Static>{getTitle(title)}</Static>. Wie geht es dir, <Var>{name}</Var>?
        </>
      );
    case "ternary":
      return condition ? "Der Junge" : "Das Mädchen"      
    case "function_calls":
      return otherStaticFunction();
  }
}

Einschränkungen

Auswirkungen auf die Performance

Die Verwendung von <Static> kann ein exponentielles Wachstum der Übersetzungseinträge verursachen. Jede zusätzliche <Static>-Komponente vervielfacht die Gesamtzahl der Übersetzungen.

Funktionsbeschränkungen

• Funktionen müssen zur Build-Zeit analysierbar sein
• Alle Rückgabepfade müssen statisch ableitbar sein
• Dynamische Inhalte im Rückgabewert von Funktionen müssen <Var>-Komponenten verwenden
• Unterstützt derzeit nur Funktionsaufrufe als direkte children

Variabler Inhalt

Jeglicher dynamischer oder variabler Inhalt innerhalb der Rückgabewerte statischer Funktionen muss in <Var>-Komponenten eingeschlossen werden.

// Korrekt
function getContent() {
  return <>Hello, <Var>{userName}</Var>!</>;
}

// Inkorrekt - verursacht Build-Fehler
function getContent() {
  return <>Hello, {userName}!</>;
}

Hinweise

• Die <Static>-Komponente ist dafür ausgelegt, mit Satzfragmenten umzugehen und dabei die grammatische Korrektheit über verschiedene Sprachen hinweg sicherzustellen.
• Berücksichtigen Sie immer die Auswirkungen auf die Performance, wenn mehrere <Static>-Komponenten in einer einzelnen Übersetzung verwendet werden.
• Behandeln Sie jede return-Anweisung in statischen Funktionen so, als wäre sie mit einer <T>-Komponente umgeben.
• Setzen Sie <Static> mit Bedacht ein – bevorzugen Sie nach Möglichkeit einfachere Übersetzungsstrukturen.

Nächste Schritte

• Für variable Inhalte in Übersetzungen siehe die Komponente <Var>.
• Für die Hauptübersetzungskomponente siehe <T>.