Übersicht

Die <Static>-Komponente wird eingesetzt, um Satzaufteilung und wiederverwendbare Inhalte zu unterstützen, ohne dabei Kongruenz, Konjugation und Änderungen der Wortstellung zu beeinträchtigen. Im folgenden Beispiel werden zwei getrennte Übersetzungen erstellt: "Der schöne Junge spielt mit dem Ball" und "Das schöne Mädchen spielt mit dem 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 zu dereferenzieren und alle möglichen Inhalte zu erfassen, 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 durch den Funktionsaufruf gerenderten Inhalt enthält, wobei für jedes mögliche Ergebnis ein separater Translation Entry erstellt wird.

Verhalten

Build-Time-Analyse

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

Funktionsanforderungen

Funktionen, die innerhalb von <Static>‑Komponenten verwendet werden, müssen statische Inhalte zurückgeben, die zur Build‑Zeit bestimmt werden können. Die unterstützte Syntax umfasst:

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

Beispiele

Grundlegende Verwendung

Verwenden Sie <Static>, um mit dynamischen Inhalten umzugehen, die die Satzstruktur beeinflussen.

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

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 werden zwei Übersetzungseinträge erstellt:

• "The boy is beautiful"
• "The girl is beautiful"

Mit Variablen

Kombiniere <Static> mit <Var>, um dynamische Inhalte in Rückgabewerten statischer Funktionen zu ermöglichen.

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

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 bei der Verwendung mehrerer <Static>-Komponenten, da sie die Anzahl der Übersetzungseinträge vervielfachen.

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

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>
  );
}

Dadurch werden vier Übersetzungseinträge erstellt (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 Funktionssyntax

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 zu einem exponentiellen Wachstum der Übersetzungseinträge führen. Jede zusätzliche <Static>-Komponente vervielfacht die Gesamtzahl der Übersetzungen.

Einschränkungen für Funktionen

• Funktionen müssen zur Build-Zeit analysierbar sein
• Alle Rückgabepfade müssen statisch bestimmbar sein
• Dynamischer Inhalt im Rückgabewert einer Funktion muss <Var>-Komponenten verwenden
• Unterstützt derzeit nur Funktionsaufrufe als direkte children

Variabler Inhalt

Alle dynamischen oder variablen Inhalte in Rückgabewerten statischer Funktionen müssen 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, Satzfragmentierung zu handhaben und dabei die grammatische Korrektheit über verschiedene Sprachen hinweg sicherzustellen.
• Berücksichtige stets die Auswirkungen auf die Performance beim Einsatz mehrerer <Static>-Komponenten innerhalb einer einzelnen Übersetzung.
• Behandle jede return-Anweisung in statischen Funktionen so, als wäre sie mit einer <T>-Komponente umschlossen.
• Setze <Static> mit Bedacht ein – bevorzuge nach Möglichkeit einfachere Übersetzungsstrukturen.

Nächste Schritte

• Für variablen Inhalt in Übersetzungen siehe die Komponente <Var>.
• Für die zentrale Übersetzungskomponente siehe <T>.