Die <T>-Komponente
So internationalisieren Sie JSX-Komponenten mit der <T>-Komponente
Die <T>-Komponente ist das zentrale Werkzeug, um JSX-Inhalte in Ihrer React-Anwendung zu internationalisieren. Sie umschließt Ihre JSX-Elemente und übersetzt sie automatisch basierend auf der Locale des Nutzers.
Schnellstart
Wandeln Sie beliebige statische JSX-Inhalte um, indem Sie sie mit <T> umschließen:
import { T } from 'gt-react';
// Vorher
function Greeting() {
return <p>Hallo, Welt!</p>;
}
// Nachher
function Greeting() {
return <T><p>Hallo, Welt!</p></T>;
}Für dynamische Inhalte innerhalb von <T> verwenden Sie Variable Components und Branching Components.
Grundlegende Verwendung
Die <T>-Komponente akzeptiert beliebige JSX-Inhalte als children:
// Simple text
<T>Willkommen in unserer App</T>
// HTML elements
<T><h1>Seitentitel</h1></T>
// Complex nested JSX
<T>
<div className="alert">
<span>Wichtig:</span> Bitte lesen Sie dies sorgfältig.</div>
</T>Konfigurationsoptionen
Kontext hinzufügen
Stellen Sie Übersetzungskontext für mehrdeutige Begriffe bereit:
<T context="notification popup, not bread">
Klicke auf die Toast‑Benachrichtigung, um sie zu schließen
</T>Übersetzungs-IDs festlegen
Verwenden Sie explizite IDs für konsistente Übersetzungen:
<T id="welcome-message">
Willkommen zurück, Benutzer!
</T>Wann Sie <T> verwenden sollten
Verwenden Sie <T> nur für statische Inhalte:
// ✅ Statischer Inhalt funktioniert
<T><button>Hier klicken</button></T>
<T><h1>Willkommen auf unserer Website</h1></T>
// ❌ Dynamischer Inhalt führt zu Fehlern
<T><p>Hallo {username}</p></T>
<T><p>Heute ist {new Date()}</p></T>
// ✅ Verwenden Sie Variable-Komponenten für dynamischen Inhalt
<T>
<p>Hallo <Var>{username}</Var></p>
</T>Variable- und Branching-Komponenten sind dafür ausgelegt, innerhalb von <T> dynamische Inhalte zu liefern. Details findest du in den Guides zu Variable Components und Branching Components.
Beispiele
Einfache Elemente
// Basic text
<T>Hallo, Welt!</T>
// Button with text
<T><Button>Formular absenden</Button></T>
// Heading with styling
<T><h1 className="text-2xl font-bold">Willkommen</h1></T>Komplexe Komponenten
// Navigationsmenü
<T>
<nav className="navbar">
<a href="/about">Über uns</a>
<a href="/contact">Kontakt</a>
</nav>
</T>
// Warnhinweis
<T>
<div className="alert alert-warning">
<AlertIcon className="w-5 h-5" />
<span>Ihre Sitzung läuft in 5 Minuten ab</span>
</div>
</T>Mit Variablen
// Kombination von statischem Text mit dynamischen Werten
<T>
<p>Willkommen zurück, <Var>{user.name}</Var>!</p>
</T>
// Formular mit gemischtem Inhalt
<T>
<label>
E-Mail: <input type="email" placeholder="E-Mail-Adresse eingeben" />
</label>
</T>Erfahren Sie mehr über die <Var>-Komponente im Leitfaden zu Variablenkomponenten.
Produktionssetup
Build-Prozess
Fügen Sie Übersetzungen zu Ihrer Build-Pipeline hinzu:
{
"scripts": {
"build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
}
}Verhalten in Entwicklung vs. Produktion
- Entwicklung: Mit einem Dev API-Schlüssel erfolgen Übersetzungen on demand, sobald Komponenten gerendert werden. Während der Entwicklung sehen Sie Übersetzungen in Echtzeit.
- Produktion: Alle Übersetzungen werden während der Build-Phase vorab erstellt und sind sichtbar, sobald Ihre Anwendung live ist.
Hinterlegen Sie Ihren Dev API-Schlüssel in Ihrer Umgebung, um während der Entwicklung Live-Übersetzungen zu aktivieren. Sie können einen im Dashboard unter API Keys erstellen.
Datenschutzaspekte
Inhalte in <T>-Komponenten werden zur Übersetzung an die GT-API gesendet. Für sensible Daten verwenden Sie Variable Components, um vertrauliche Informationen lokal zu halten:
// Sicher – vertrauliche Daten bleiben lokal
<T>
Willkommen zurück, <Var>{username}</Var>
</T>Häufige Probleme
Komponenten-Grenzen
<T> übersetzt nur direkte children, nicht Inhalte innerhalb anderer Komponenten:
// ❌ Falsch - Inhalte innerhalb von Komponenten werden nicht übersetzt
function MyComponent() {
return <p>Dies wird nicht übersetzt</p>;
}
<T>
<h1>Dies wird übersetzt</h1>
<MyComponent /> {/* Inhalte darin werden nicht übersetzt */}
</T>
// ✅ Richtig - jede Komponente einzeln umschließen
function MyComponent() {
return <T><p>Dies wird übersetzt</p></T>;
}
<T><h1>Dies wird übersetzt</h1></T>
<MyComponent />Verschachteln von <T>-Komponenten
// ❌ <T>-Komponenten nicht schachteln
<T>
<T>Hallo, Welt</T> {/* Nicht so machen */}
</T>Fehler bei dynamischen Inhalten
Die CLI gibt bei dynamischen Inhalten in <T> einen Fehler aus. Umschließen Sie dynamische Werte mit „Variable“-Komponenten:
// ❌ Falsch – dynamische Inhalte funktionieren nicht
<T><p>Hallo {username}</p></T>
// ✅ Richtig – Variable-Komponenten verwenden
<T><p>Hallo <Var>{username}</Var></p></T>Siehe den Leitfaden zu Variablen-Komponenten für den Umgang mit dynamischen Werten und den Leitfaden zu verzweigten Komponenten für bedingte Inhalte.
Nächste Schritte
- Variable Components Guide - Dynamische Inhalte in JSX-Übersetzungen handhaben
- Branching Components Guide - Bedingte Logik zu Ihren Übersetzungen hinzufügen
Wie ist diese Anleitung?