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

Für asynchrone Komponenten siehe getTranslations().

getTranslations() und useTranslations() verwenden ein Wörterbuch, um alle Inhalte für die Übersetzung zu speichern. Dies unterscheidet sich von der Verwendung der <T> Komponente für die Übersetzung. Wenn Sie nur <T> Komponenten für die Übersetzung verwenden möchten, dann ist dieses Dokument nicht relevant.

Referenz

Parameter

Prop	Type	Default
`id??`	`string`	`undefined`

Beschreibung

Prop	Beschreibung
`id`	Ein optionales Präfix, das allen Übersetzungsschlüsseln vorangestellt wird. Dies ist nützlich für die Arbeit mit verschachtelten Wörterbucheinträgen.

Rückgabe

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

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

Name	Type	Beschreibung
`id`	`string`	Die ID des zu übersetzenden Eintrags
`options?`	`DictionaryTranslationOptions`	Übersetzungsoptionen zur Anpassung des Verhaltens von `d()`.

Beispiele

Grundlegende Verwendung

Jeder Eintrag in Ihrem Dictionary wird übersetzt.

dictionary.jsx

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

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

TranslateGreeting.jsx

import { useTranslations } from 'gt-next';

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

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 Dictionary weisen wir den Bezeichner {userName} zu.

dictionary.jsx

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

src/server/TranslateGreeting.jsx

import { useTranslations } from 'gt-next';

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

  return (
    <p>
      {greetingAlice}
    </p>
  );
}

Verwendung von Präfixen

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

dictionary.jsx

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:

UserDetails.jsx

import { useTranslations } from 'gt-next';

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 auf der Client-Seite zuzugreifen.
Der useTranslations() Hook kann nur innerhalb einer Komponente verwendet werden, die von einer <GTProvider> Komponente umschlossen ist.

Nächste Schritte

Für serverseitige Übersetzungen siehe getTranslations().
Erfahren Sie mehr über die Verwendung von Wörterbüchern in der Wörterbuch-Referenz.
Siehe DictionaryTranslationOptions für weitere Informationen zu Übersetzungsoptionen.

useTranslations()

Auf dieser Seite