useTranslations()

Überblick

useTranslations() wird verwendet, um auf String-Übersetzungen aus dem Übersetzungswörterbuch zuzugreifen. Es muss innerhalb einer Komponente verwendet werden, die von einem <GTProvider> umschlossen ist.

const d = useTranslations(); // Get the translation function
d('greeting.hello'); // pass the id to get a translation

Referenz

Parameter

Beschreibung

Rückgabe

Eine Übersetzungsfunktion d(), die bei Angabe einer ID die übersetzte Version des entsprechenden Eintrags zurückgibt

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

Beispiele

Grundlegende Verwendung

Jeder Eintrag in Ihrem Wörterbuch wird übersetzt.

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

Wenn wir auf diese Einträge zugreifen möchten, rufen wir useTranslations() auf. Dies gibt eine Funktion zurück, die den Schlüssel einer Übersetzung aus dem Wörterbuch akzeptiert.

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

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

export default async 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 zuweisen und (2) den Bezeichner beim Aufruf der d()-Funktion referenzieren.

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

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

import { useTranslations } from 'gt-react';

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

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

Verwendung von Präfixen

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

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

Da wir den Wert 'prefix1.prefix2' zum useTranslations-Hook hinzugefügt haben, werden alle Schlüssel mit prefix1.prefix2 vorangestellt:

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>
  );
}

Notizen

• Die useTranslations() Funktion ermöglicht es Ihnen, auf Wörterbuch-Übersetzungen zuzugreifen.
• Der useTranslations() Hook kann nur innerhalb einer Komponente verwendet werden, die von einer <GTProvider> Komponente umschlossen ist.

Nächste Schritte

• Erfahren Sie mehr über die Verwendung von Wörterbüchern in der Wörterbuch-Referenz.