InlineÜbersetzungsOptionen
API-Referenz für den Typ InlineÜbersetzungsOptionen
Überblick
Der InlineTranslationOptions
-Typ wird verwendet, um Variablen an Inline-Übersetzungen zu übergeben und ihr Renderverhalten festzulegen.
Sie können der Übersetzung auch Kontext und eine Kennung hinzufügen.
Er wird mit useGT()
verwendet, um Variablen an Inline-String-Übersetzungen zu übergeben.
Buildtime-Übersetzung:
useGT()
-Ü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
Prop | Type | Default |
---|---|---|
variablesOptions?? | Record<string, Intl.NumberFormatOptions | Intl.DateTimeFormatOptions> | undefined |
variables?? | Record<string, any> | undefined |
id?? | string | undefined |
context?? | string | undefined |
Beschreibung
Prop | Beschreibung |
---|---|
context | Der Kontext des Inhalts (wird für die Übersetzung verwendet). |
id | Eine optionale Kennung zur Verwendung mit dem Übersetzungseditor. |
variables | Ein Objekt, bei dem die Schlüssel identifizieren, wo jeder Wert in der Zeichenkette 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
Kontext
Um dem String Kontext hinzuzufügen, verwenden wir die context
-Eigenschaft.
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>{t('Hello, world!', { context: 'a formal greeting' })}</div>;
};
Variablen übergeben
Um eine Variable zum String hinzuzufügen, verwenden wir die {variable-name}
-Syntax, wobei geschweifte Klammern den Namen der Variable umschließen.
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>{t('Hello, {username}! How is your day?', { variables: { 'username' : 'Brian123' } })}</div>;
};
Variable Optionen hinzufügen
Sie können auch anpassen, wie Ihre Variablen mit der variablesOptions
-Eigenschaft gerendert werden.
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>
{ t(
'Your account balance: {account-balance}!',
{
variables: { "account-balance" : 1000000 },
variableOptions: { "account-balance": { style: 'currency', currency: 'USD' } }
}
) }
</div>;
};
Notizen
InlineTranslationOptions
wird für die Übersetzung von Zeichenfolgen verwendet.- Das
variables
-Objekt übergibt Werte an den Text. - Das
variablesOptions
-Objekt definiert das Verhalten der Variablen.
Nächste Schritte
- Siehe
useGT()
für weitere Informationen über Inline-String-Übersetzungen. - Siehe
Intl.NumberFormatOptions
undIntl.DateTimeFormatOptions
für weitere Informationen zu Formatierungsoptionen.
Wie ist dieser Leitfaden?