useGT()

Überblick

Die useGT()-Funktion ist ein Hook zum Übersetzen von Strings zur Build-Zeit.

const t = useGT();

<p>{  t('This text will be translated')  }</p>;

Referenz

Parameter

Keine

Rückgabewerte

Eine Callback-Funktion, t(), die den bereitgestellten Inhalt übersetzt.

(content: string, options?: InlineTranslationOptions) => string

Verhalten

Produktion

Während des CD-Prozesses wird jeder Inhalt innerhalb einer t()-Funktion übersetzt, bevor Ihre Anwendung bereitgestellt wird. Dies gewährleistet schnelle Ladezeiten für alle Sprachen, kann aber nur Inhalte übersetzen, die zur Build-Zeit bekannt sind.

Nach der Generierung werden Übersetzungen entweder (1) im CDN gespeichert oder (2) in der Build-Ausgabe Ihrer App gespeichert, je nach Ihrer Konfiguration. Von dort wird der übersetzte Inhalt an Ihre Benutzer ausgeliefert. Wenn eine Übersetzung nicht gefunden wird, wird auf den ursprünglichen Inhalt zurückgegriffen.

Stellen Sie sicher, dass Sie der Bereitstellungsanleitung hier folgen.

Entwicklung

Während der Entwicklung übersetzt die t()-Funktion Inhalte auf Anfrage. Dies ist nützlich für die Prototypenerstellung, um zu sehen, wie Ihre App in verschiedenen Sprachen aussehen wird. Denken Sie daran, einen Dev-API-Schlüssel zu Ihrer Umgebung hinzuzufügen, um dieses Verhalten zu aktivieren.

Sie werden eine Verzögerung während der On-Demand-Übersetzung in der Entwicklung bemerken. Dies wird bei Produktions-Builds nicht auftreten.

Beispiel

Grundlegende Verwendung

Sie können useGT() verwenden, um Strings zu übersetzen.

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Hello, Alice!')}
    </p>
  );
}

Hinweis: "Alice" wird in die bevorzugte Sprache des Benutzers übersetzt.

Verwendung von Variablen

Sie können Variablen an Wörterbuchübersetzungen übergeben.

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Hello, {name}!', { variables: { name: 'Alice' } })}
    </p>
  );
}

Hinweis: "Alice" wird nicht in die bevorzugte Sprache des Benutzers übersetzt, da es sich um eine Variable handelt.

Notizen

• Die useGT()-Funktion ist ein Hook zum Übersetzen von Strings.
• Der useGT()-Hook kann nur innerhalb einer Komponente verwendet werden, die von einer <GTProvider>-Komponente umschlossen ist.
• Übersetzungen von Strings mit useGT() erfolgen vor der Laufzeit, während des Build-Prozesses (außer in der Entwicklung).

Nächste Schritte

• Siehe useTranslations() für die Übersetzung von Strings mit einem Wörterbuch.
• Siehe InlineTranslationOptions für weitere Informationen zur Anpassung von Übersetzungen.