Die <T>-Komponente
Internationalisieren von 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 anhand der Locale des Nutzers.
Schnellstart
Wandle beliebige statische JSX-Inhalte um, indem du sie mit <T> umschließt:
import { T } from 'gt-react';
// Vorher
function Greeting() {
return <p>Hello, world!</p>;
}
// Nachher
function Greeting() {
return <T><p>Hello, world!</p></T>;
}Für dynamische Inhalte innerhalb von <T> verwenden Sie Variable Components und Branching Components.
Grundlegende Verwendung
Die <T>-Komponente akzeptiert beliebigen JSX-Inhalt als children:
// Einfacher Text
<T>Willkommen in unserer App</T>
// HTML-Elemente
<T><h1>Seitentitel</h1></T>
// Komplexes verschachteltes JSX
<T>
<div className="alert">
<span>Wichtig:</span> Bitte sorgfältig lesen.
</div>
</T>Konfigurationsoptionen
Kontext hinzufügen
Geben Sie Übersetzungskontext für mehrdeutige Begriffe an:
<T context="notification popup, not bread">
Klicken Sie auf die 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!
</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 funktioniert nicht
<T><p>Hallo {username}</p></T>
<T><p>Heute ist {new Date()}</p></T>
// ✅ Variable-Komponenten für dynamischen Inhalt verwenden
<T>
<p>Hallo <Var>{username}</Var></p>
</T>Variable- und Branching-Komponenten sind dafür ausgelegt, innerhalb von <T> mit dynamischen Inhalten zu arbeiten. Einzelheiten finden Sie in den Leitfäden 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>
// Warnmeldung
<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 Variables
// Statischen Text mit dynamischen Werten kombinieren
<T>
<p>Willkommen zurück, <Var>{user.name}</Var>!</p>
</T>
// Formular mit gemischtem Inhalt
<T>
<label>
E-Mail: <input type="email" placeholder="Geben Sie Ihre E-Mail-Adresse ein" />
</label>
</T>Erfahren Sie mehr über die <Var>-Komponente im Leitfaden zu Variablenkomponenten.
Produktionssetup
Build-Prozess
Fügen Sie die Übersetzungen in Ihre Build-Pipeline ein:
{
"scripts": {
"build": "npx gtx-cli translate && <...IHR_BUILD_BEFEHL...>"
}
}Verhalten in Entwicklung vs. Produktion
- Entwicklung: Mit einem Dev-API-Schlüssel erfolgen Übersetzungen bei Bedarf, sobald Komponenten gerendert werden. Während der Entwicklung sehen Sie Übersetzungen in Echtzeit.
- Produktion: Alle Übersetzungen werden während der Build-Phase vorab erzeugt und sind sichtbar, sobald Ihre Anwendung live ist.
Hinterlegen Sie Ihren Dev-API-Schlüssel in Ihrer Umgebung, um Live-Übersetzungen während der Entwicklung zu aktivieren. Sie können einen im Dashboard unter API Keys erstellen.
Datenschutzaspekte
Der Inhalt in <T>-Komponenten wird zur Übersetzung an die GT-API gesendet. Für sensible Daten verwenden Sie Variable Components, um vertrauliche Informationen lokal zu halten:
// Sicher - sensible Daten bleiben lokal
<T>
Willkommen zurück, <Var>{username}</Var>
</T>Häufige Probleme
Komponenten-Grenzen
<T> übersetzt nur direkte Children und 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 innerhalb 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 />Verschachtelung von <T>-Komponenten
// ❌ <T>-Komponenten nicht verschachteln
<T>
<T>Hallo Welt</T> {/* Das nicht machen */}
</T>Fehler bei dynamischen Inhalten
Die CLI gibt bei dynamischen Inhalten in <T> einen Error aus. Umschließen Sie dynamische Werte mit Variable-Komponenten:
// ❌ Falsch - dynamischer Inhalt führt zu Fehlern
<T><p>Hello {username}</p></T>
// ✅ Richtig - Variable-Komponenten verwenden
<T><p>Hello <Var>{username}</Var></p></T>Siehe den Leitfaden zu Variable Components für den Umgang mit dynamischen Werten und den Leitfaden zu Branching Components für bedingte Inhalte.
Nächste Schritte
- Leitfaden zu Variable Components - Dynamische Inhalte in JSX-Übersetzungen handhaben
- Leitfaden zu Branching Components - Bedingte Logik in Ihre Übersetzungen einbauen
Wie ist dieser Leitfaden?