Überblick

useTranslations dient dazu, Zeichenkettenübersetzungen aus dem Übersetzungswörterbuch abzurufen.

Es muss innerhalb einer Komponente verwendet werden, die von einem <GTProvider> umschlossen ist.

const d = useTranslations(); // Übersetzungsfunktion abrufen
d('greeting.hello'); // id übergeben, um eine Übersetzung zu erhalten

Referenzen

Parameter

Beschreibung

Rückgabe

Eine Übersetzungsfunktion d, die für eine angegebene id die übersetzte Version des entsprechenden Entry zurückgibt

(id: string, options?: DictionaryTranslationOptions) => React.ReactNode

Beispiele

Grundlegende Nutzung des Wörterbuchs

Jeder Eintrag in Ihrem Wörterbuch wird übersetzt.

const dictionary = {
  greeting: "Hallo, Bob", 
};
export default dictionary;

Wenn wir auf diese Einträge zugreifen möchten, rufen wir useTranslations auf. Dadurch erhalten wir eine Funktion, die den Schlüssel einer Übersetzung aus dem Wörterbuch entgegennimmt.

Sie müssen das Wörterbuch an die GTProvider-Komponente übergeben.

import { useTranslations } from 'gt-react';
import dictionary from "./dictionary.json"

export default function TranslateGreeting() {
  const d = useTranslations(); 
  return (
    <GTProvider dictionary={dictionary}>
      <p>
        {d('greeting')} // [!code highlight]
      </p>
    </GTProvider>
  );
}

Variablen verwenden

Um Werte zu übergeben, müssen Sie (1) eine Kennung zuweisen und (2) diese Kennung beim Aufruf der Funktion d referenzieren.

In diesem Beispiel verwenden wir {}, um Variablen an die Übersetzungen zu übergeben. Im Wörterbuch weisen wir die Kennung {userName} zu.

const dictionary = {
  greeting: "Hallo, {userName}!", 
};
export default dictionary;

import { useTranslations } from 'gt-react';

export default function TranslateGreeting() {
  const d = useTranslations();
  
  // Hallo, Alice!
  const greetingAlice = d('greeting', { userName: "Alice" }); 

  return (
    <p>
      {greetingAlice} // Hallo, Alice // [!code highlight]
    </p>
  );
}

Präfixe verwenden

Wir können Präfixe verwenden, um nur eine Teilmenge des Wörterbuchs zu übersetzen.

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: "Hallo, Bob",
    }
  }
};
export default dictionary;

Weil wir den value 'prefix1.prefix2' dem useTranslations-Hook hinzugefügt haben, sind alle Keys mit prefix1.prefix2 präfixiert:

import { useTranslations } from 'gt-react';

export default function UserDetails() {
  const d = useTranslations('prefix1.prefix2'); 
  return (
    <div>
      <p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}

Hinweise

• Die Funktion useTranslations ermöglicht den Zugriff auf Wörterbuchübersetzungen.
• Der Hook useTranslations kann nur innerhalb einer Komponente verwendet werden, die von einer <GTProvider>-Komponente umschlossen ist.

Nächste Schritte