Übersicht

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 Sie über das SDK verstehen sollten.

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.

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 useTranslations Hook

Der useTranslations Hook ist ein React Hook, der eine Funktion zurückgibt, die verwendet werden kann, um Übersetzungen für einen gegebenen Schlüssel abzurufen.

const dictionary = {
  hello: {
    world: 'Hello, world!',
  },
};

const translate = useTranslations();
translate('hello.world');

Dieses Verhalten ist ähnlich zu anderen Übersetzungsbibliotheken, wie react-i18next und next-intl.

Siehe den dictionaries Leitfaden, um mehr über den useTranslations Hook zu erfahren.

Siehe die useTranslations API-Referenz für weitere Informationen.

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