useGT()

Überblick

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

const t = useGT();
 
<p>{  t('Dieser Text wird übersetzt')  }</p>;

Referenz

Parameter

Keine

Rückgaben

Eine Rückruffunktion, t(), die den bereitgestellten Inhalt übersetzt.

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

Verhalten

Produktion

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

Sobald sie generiert sind, werden Übersetzungen entweder (1) im CDN gespeichert oder (2) im Build-Output Ihrer App gespeichert, je nach Ihrer Konfiguration. Von dort aus 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 dem Bereitstellungsleitfaden hier folgen.

Entwicklung

Während der Entwicklung wird die t()-Funktion Inhalte auf Abruf übersetzen. Dies ist nützlich, um zu prototypisieren, 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 bei der Übersetzung auf Abruf während der Entwicklung feststellen. Dies wird bei Produktions-Builds nicht auftreten.

Beispiel

Grundlegende Verwendung

Sie können useGT() verwenden, um Zeichenfolgen 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 Funktion useGT() ist ein Hook zum Übersetzen von Zeichenfolgen.
• Der useGT() Hook kann nur innerhalb einer Komponente verwendet werden, die von einer <GTProvider> Komponente umschlossen ist.
• Übersetzungen von Zeichenfolgen mit useGT() erfolgen vor der Laufzeit, während des Build-Prozesses (es sei denn, in der Entwicklung).

Nächste Schritte

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