Übersicht
Übersicht über das React SDK von General Translation
Einführung
Das General Translation React SDK ist eine Open-Source-Internationalisierungsbibliothek (i18n) für React.
Es bietet eine Reihe von Tools, die Ihnen helfen, Ihre React-Anwendung auf einfache und wartbare Weise zu internationalisieren, mit Funktionsgleichheit zu anderen beliebten i18n-Bibliotheken.
Das React SDK kann ohne die General Translation Plattform verwendet werden und verhält sich sehr ähnlich wie andere i18n-Bibliotheken.
Es integriert sich jedoch auch mit unserer Plattform und bietet zusätzliche Funktionen wie:
- Übersetzungs-Hot-Reloading in der Entwicklung
- Automatische KI-Übersetzungen
- Synchronisierung von Übersetzungen mit der General Translation Plattform
- Native Integration mit unserem Übersetzungs-CDN
Konzepte
Es gibt 4 Hauptkonzepte, die man über das SDK verstehen sollte.
Die <GTProvider>
Komponente
Die <T>
Komponente
Der useGT
Hook
(Optional) Der useDict
Hook
Die <GTProvider>
-Komponente
import { GTProvider } from 'gt-react';
Die <GTProvider>
-Komponente ist die Hauptkomponente, die du zu deiner Anwendung hinzufügen musst.
Sie wird verwendet, um dem Rest deiner Anwendung Kontext bereitzustellen.
Dieser Kontext umfasst die aktuelle Sprache und die entsprechenden Übersetzungen für diese Sprache.
Wichtige Hinweise
- Der Provider sollte deine gesamte Anwendung umschließen.
- Idealerweise sollte er so weit oben im Baum wie möglich platziert werden, zum Beispiel in deiner Root-Komponente.
Weitere Informationen findest du auf der GTProvider-Seite.
Die <T>
Komponente
Die <T>
Komponente ist die empfohlene Methode, um Inhalte in deiner Anwendung zu übersetzen.
Es handelt sich um eine React-Komponente, die verwendet werden kann, um jedes JSX-Element zu umschließen, und die den Inhalt des Elements automatisch in eine unterstützte Sprache rendert.
Wir empfehlen, die <T>
Komponente wann immer möglich zu verwenden, da sie die größte Flexibilität bei Übersetzungen bietet.
Im Gegensatz zu Zeichenketten kann die <T>
Komponente verwendet werden, um HTML-Inhalte zu übersetzen, was sie deutlich leistungsfähiger macht als reine Zeichenkettenübersetzungen.
Beispiele
<T>
<div>Hello, world!</div>
</T>
<T>
<div>
<h1> Here is an image </h1>
<img src="https://example.com/image.png" alt="Example" />
</div>
</T>
<T>
Formatting can be done easily with the `<T>` component.
<Num>{1000}</Num>
<DateTime>{new Date()}</DateTime>
<Currency>{1000}</Currency>
</T>
Siehe die Anleitung JSX übersetzen, um mehr über die verschiedenen Möglichkeiten der Verwendung der <T>
Komponente zu erfahren.
Siehe die T API Referenz für die API der <T>
Komponente.
Der useGT
-Hook
Der useGT
-Hook ist ein React-Hook, der ähnlich wie die <T>
-Komponente verwendet werden kann, jedoch mit einigen Kompromissen.
Der Hook gibt eine Funktion zurück, mit der Zeichenketten übersetzt werden können.
const translate = useGT();
translate('Hello, world!');
Im Vergleich zur <T>
-Komponente bietet der useGT
-Hook mehr Flexibilität in deinem Code.
Wenn du zum Beispiel eine komplexe Datenstruktur mit verschachtelten Zeichenketten hast, wäre eine <T>
-Komponente schwieriger zu verwenden.
const t = useGT();
const data = {
title: t('Hello, world!'),
description: t('This is a description'),
};
Siehe die strings-Anleitung, um mehr über den useGT
-Hook zu erfahren.
Siehe die useGT API-Referenz für weitere Informationen.
Der useDict
Hook
Der useDict
Hook ist ein React-Hook, der eine Funktion zurückgibt, die verwendet werden kann, um Übersetzungen für einen bestimmten Schlüssel abzurufen.
const dictionary = {
hello: {
world: 'Hello, world!',
},
};
const translate = useDict();
translate('hello.world');
Dieses Verhalten ähnelt anderen Übersetzungsbibliotheken wie react-i18next
und next-intl
.
Wir empfehlen nicht, den useDict
Hook in Ihrer Anwendung zu verwenden. Häufige Verwendung des useDict
Hooks macht Ihre Codebasis schwieriger zu warten
und führt zu großen technischen Schulden.
Stattdessen empfehlen wir die Verwendung der <T>
Komponente oder des useGT
Hooks.
Wenn Sie von einer anderen i18n-Bibliothek migrieren, ist der useDict
Hook ein direkter Ersatz und kann für die schrittweise Migration Ihrer Codebasis nützlich sein.
Weitere Informationen finden Sie im Wörterbücher-Leitfaden, um mehr über den useDict
Hook zu erfahren.
Weitere Informationen finden Sie in der useDict API-Referenz.
Nächste Schritte
- Erfahren Sie, wie Sie Ihr React-Projekt mit dem SDK einrichten: Projekt Schnellstart
- Erfahren Sie, wie Sie Zeichenketten mit dem
useGT
Hook übersetzen: Zeichenketten übersetzen - Erfahren Sie, wie Sie JSX-Inhalte mit der
<T>
Komponente übersetzen: JSX übersetzen
Wie ist dieser Leitfaden?