DictionaryTranslationOptions
API-Referenz für den Typ DictionaryTranslationOptions
Übersicht
Der DictionaryTranslationOptions
Typ wird verwendet, um Variablen an Wörterbucheinträge zu übergeben und ihr Renderverhalten zu spezifizieren.
Er wird mit useTranslations()
verwendet, um Variablen an Wörterbucheinträge zu übergeben.
Buildtime Translation:
useTranslations()
Übersetzungen erfolgen zur Buildzeit; Variablen werden jedoch niemals übersetzt.
Stattdessen werden sie mit Formatierung in die Übersetzung eingefügt.
Stellen Sie sicher, dass Sie dem Deployment-Leitfaden hier folgen.
Referenz
Parameter
Prop | Type | Default |
---|---|---|
variablesOptions?? | Record<string, Intl.NumberFormatOptions | Intl.DateTimeFormatOptions> | undefined |
variables?? | Record<string, any> | undefined |
Beschreibung
Prop | Beschreibung |
---|---|
variables | Ein Objekt, bei dem die Schlüssel angeben, wo jeder Wert im Wörterbucheintrag zugeordnet wird. |
variablesOptions | Ein 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) diese Variable im d()
Aufruf referenzieren.
Zuerst fügen wir eine Variable zum Wörterbucheintrag mit der folgenden Syntax hinzu: {username}
.
username
ist der Name der Variable.
const dictionary = {
greeting: {
hello: 'Hallo, {username}!',
},
};
export default dictionary;
Als nächstes referenzieren wir die Variable:
import { useTranslations } from 'gt-react';
const Component = () => {
const d = useTranslations();
return <div>{d('greeting.hello', { variables: { username : 'Brian123' } })}</div>;
};
Variablenoptionen hinzufügen
Variablenoptionen ermöglichen es Ihnen, anzupassen, wie eine Variable gerendert wird.
Sie verwenden die gleiche Syntax wie das variables
Objekt.
const dictionary = {
account: {
balance: 'Ihr Kontostand: {account-balance}!',
},
};
export default dictionary;
Als nächstes referenzieren wir die Variable:
import { useTranslations } from 'gt-react';
const Component = () => {
const d = useTranslations();
return <div>
{ d(
'account.balance',
{
variables: { "account-balance" : 1000000 },
variableOptions: { "account-balance": { style: 'currency', currency: 'USD' } }
}
) }
</div>;
};
Hinweise
- Das
variables
-Objekt übergibt Werte an einen Wörterbucheintrag. - Das
variablesOptions
-Objekt definiert das Verhalten der Variablen.
Nächste Schritte
- Siehe Wörterbücher für weitere Informationen zu Wörterbüchern und bewährten Praktiken.
- Siehe
useTranslations()
für weitere Informationen zur Wörterbuch-Schnittstelle. - Siehe
Intl.NumberFormatOptions
undIntl.DateTimeFormatOptions
für weitere Informationen zu Formatierungsoptionen.
Wie ist dieser Leitfaden?