Überblick

useTranslations dient dazu, Zeichenkettenübersetzungen aus dem Übersetzungs-Wörterbuch abzurufen.

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

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

Referenz

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 Verwendung des Wörterbuchs

Jeder Entry in deinem 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. Das liefert eine Funktion, die den Schlüssel einer Übersetzung aus dem Wörterbuch entgegennimmt.

Sie müssen das Wörterbuch an die Komponente GTProvider ü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>
  );
}

Verwendung von Variablen

Um Werte zu übergeben, müssen Sie (1) einen Bezeichner festlegen und (2) diesen Bezeichner referenzieren, wenn Sie die Funktion d aufrufen.

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

const dictionary = {
  greeting: „Hallo, {userName}!", // [!code highlight]
};
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>
  );
}

Verwendung von Präfixen

Wir können Präfixe nutzen, um nur einen Teil des Wörterbuchs zu übersetzen.

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

Da wir den Wert 'prefix1.prefix2' an den Hook useTranslations übergeben haben, sind alle Schlüssel mit prefix1.prefix2 versehen:

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 useTranslations-Funktion ermöglicht den Zugriff auf Übersetzungen aus dem Wörterbuch.
• Der useTranslations-Hook kann nur innerhalb einer Komponente verwendet werden, die von einer <GTProvider>-Komponente umschlossen ist.

Nächste Schritte