useDict()

Überblick

useDict() wird verwendet, um auf Zeichenkettenübersetzungen aus dem Übersetzungswörterbuch für clientseitige Komponenten zuzugreifen. Es muss innerhalb einer Komponente verwendet werden, die von einem <GTProvider> umschlossen ist.

const d = useDict(); // Holen Sie sich die Übersetzungsfunktion
d('greeting.hello'); // übergeben Sie die ID, um eine Übersetzung zu erhalten

Für serverseitige Übersetzungen siehe getDict().

getDict() und useDict() 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 daran interessiert sind, nur <T> Komponenten für die Übersetzung zu verwenden, 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örterbuchwerten.

Rückgaben

Eine Übersetzungsfunktion d(), die, gegeben eine id, die übersetzte Version des entsprechenden Eintrags zurückgibt

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

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

Beispiele

Grundlegende Verwendungen

Jeder Eintrag in Ihrem Wörterbuch 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 useDict() auf. Dies gibt eine Funktion zurück, die den Schlüssel einer Übersetzung aus dem Wörterbuch akzeptiert.

TranslateGreeting.jsx

"use client";
import { useDict } from 'gt-next/client';
 
export default async function TranslateGreeting() {
  const d = useDict(); 
  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 referenzieren, wenn Sie die d() Funktion aufrufen.

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

dictionary.jsx

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

src/server/TranslateGreeting.jsx

"use client";
import { useDict } from 'gt-next/client';
 
export default async function TranslateGreeting() {
  const d = useDict();
  
  // Hello Alice!
  const greetingAlice = d('greeting', { userName: "Alice" }); 
 
  return (
    <p>
      {greetingAlice}
    </p>
  );
}

Verwendung von Präfixen

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

dictionary.jsx

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

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

UserDetails.jsx

"use client";
import { useDict } from 'gt-next/client';
 
export default function UserDetails() {
  const d = useDict('prefix1.prefix2'); 
  return (
    <div>
      <p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}

Notizen

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

Nächste Schritte

Für serverseitige Übersetzungen siehe getDict().
Erfahren Sie mehr über die Verwendung von Wörterbüchern in der Wörterbuchreferenz.
Weitere Informationen zu Übersetzungsoptionen finden Sie unter DictionaryTranslationOptions.

useDict()

Auf dieser Seite