Types

DictionaryTranslationOptions

API-Referenz für den Typ DictionaryTranslationOptions

Überblick

Der DictionaryTranslationOptions-Typ wird verwendet, um Variablen an Wörterbucheinträge zu übergeben und ihr Renderverhalten zu spezifizieren. Er wird mit useDict() verwendet, um Variablen an Wörterbucheinträge zu übergeben.

Übersetzung zur Buildzeit: useDict()-Übersetzungen erfolgen zur Buildzeit; jedoch werden Variablen niemals übersetzt. Stattdessen werden sie mit Formatierung in die Übersetzung eingefügt. Stellen Sie sicher, dass Sie der Bereitstellungsanleitung hier folgen.

Referenz

Parameter

PropTypeDefault
variables??
Record<string, any>
undefined
variablesOptions??
Record<string, Intl.NumberFormatOptions | Intl.DateTimeFormatOptions>
undefined

Beschreibung

PropBeschreibung
variablesEin Objekt, bei dem die Schlüssel identifizieren, wo jeder Wert im Wörterbucheintrag zugeordnet wird.
variablesOptionsEin Objekt, bei dem die Schlüssel die Variable identifizieren und die Werte das Verhalten der Variablen definieren. Siehe Intl.NumberFormatOptions und Intl.DateTimeFormatOptions für weitere Informationen.

Beispiele

Variablen übergeben

Um eine Variable an den Wörterbucheintrag zu übergeben, müssen wir zwei Dinge tun: (1) eine Variable zum Eintrag hinzufügen und (2) die genannte Variable in der d() Aufruf referenzieren.

Zuerst fügen wir dem Wörterbucheintrag eine Variable mit folgendem Syntax hinzu: {username}. username ist der Name der Variable.

dictionary.ts
const dictionary = {
  greeting: {
    hello: 'Hallo, {username}!',
  },
};
 
export default dictionary;

Als nächstes referenzieren wir die Variable:

Component.tsx
import { useDict } from 'gt-react';
 
const Component = () => {
  const d = useDict();
  return <div>{d('greeting.hello', { variables: { username : 'Brian123' } })}</div>;
};

Hinzufügen von Variablenoptionen

Variablenoptionen ermöglichen es Ihnen, anzupassen, wie eine Variable gerendert wird. Es verwendet denselben Syntax wie das variables Objekt.

dictionary.ts
const dictionary = {
  account: {
    balance: 'Ihr Kontostand: {account-balance}!',
  },
};
 
export default dictionary;

Als nächstes referenzieren wir die Variable:

Component.tsx
import { useDict } from 'gt-react';
 
const Component = () => {
  const d = useDict();
  return <div>
    { d(
      'account.balance',
      {
        variables: { "account-balance" : 1000000 },
        variableOptions: { "account-balance": { style: 'currency', currency: 'USD' } }
      }
    ) }
  </div>;
};

Notizen

  • Das variables Objekt übergibt Werte an einen Wörterbucheintrag.
  • Das variablesOptions Objekt definiert das Verhalten der Variablen.

Nächste Schritte

Auf dieser Seite