Components
GTProvider
API-Referenz für die Komponente <GTProvider>
Überblick
Die Komponente <GTProvider> stellt den General Translation (GT)-Kontext für ihre children bereit und ermöglicht den Zugriff auf übersetzte Inhalte.
Sie ist für alle clientseitigen Übersetzungen in Ihrer Anwendung erforderlich.
Wann verwenden
- Wickle deine gesamte Anwendung in
<GTProvider>, um Übersetzungen auf dem Client zu aktivieren. - Bei der Arbeit mit dictionaries kannst du optional eine
idangeben, um die an den Client gesendeten dictionary-Daten einzuschränken und so die Performance bei großen dictionaries zu optimieren. - Die Komponente
<GTProvider>wird sowohl für Inline-<T>als auch für dictionaries verwendet.
Referenzen
Props
Prop
Type
Beschreibung
| Prop | Beschreibung |
|---|---|
children | Beliebige Komponente oder die übergeordneten Elemente einer Komponente, die clientseitig übersetzen oder auf Übersetzungsinformationen zugreifen müssen. Dazu gehören alle Komponenten, die <T>, useGT oder andere Übersetzungs‑Utilities verwenden. |
id? | Die id eines verschachtelten Wörterbuchs, um die an den Client gesendeten Daten zu begrenzen. Das ist nützlich für große Projekte mit umfangreichen dictionaries. |
Rückgabewert
JSX.Element|undefined, das die an diese Komponente übergebenen children enthält.
Beispiel
Grundlegende Verwendung
Umschließen Sie Ihre Anwendung mit <GTProvider>, um Ihrer App den Übersetzungskontext bereitzustellen.
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<GTProvider> // [!code highlight]
{children}
</GTProvider> // [!code highlight]
</body>
</html>
);
}Verwendung der id-Prop für Teilmengen
Geben Sie die id-Prop an, um die Performance zu optimieren, indem nur eine Teilmenge des Wörterbuchs an den Client gesendet wird.
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<GTProvider id="nested.dictionary.key"> // [!code highlight]
{children}
</GTProvider>
</body>
</html>
);
}Hinweise
- Der
<GTProvider>muss in Client-Komponenten alle<T>-Komponenten und andere übersetzungsbezogene Komponenten umschließen. Mehr dazu hier. - Für serverseitige Übersetzungen ist
<GTProvider>nicht erforderlich, kann aber weiterhin verwendet werden.
Nächste Schritte
- Erfahre mehr über die
<T>-Komponente zum Übersetzen von Text und Komponenten.
Wie ist dieser Leitfaden?