InlineTranslationOptions

Ü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() und getGT() verwendet, um Variablen an Inline-String-Übersetzungen zu übergeben.

Buildtime-Übersetzung: Variablen werden nicht mit useGT() und getGT() übersetzt, nur der Originalstring. Siehe tx() für die Übersetzung von Strings mit dynamischem Inhalt.

Referenz

Parameter

Prop	Type	Default
`context??`	`string`	`undefined`
`id??`	`string`	`undefined`
`variables??`	`Record<string, any>`	`undefined`
`variablesOptions??`	`Record<string, Intl.NumberFormatOptions \| Intl.DateTimeFormatOptions>`	`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.

Component.tsx

import { useGT } from 'gt-next/client';
 
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.

Component.tsx

import { useGT } from 'gt-next/client';
 
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.

Component.tsx

import { useGT } from 'gt-next/client';
 
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() und getGT() für weitere Informationen über Inline-String-Übersetzungen.
Siehe Intl.NumberFormatOptions und Intl.DateTimeFormatOptions für weitere Informationen zu Formatierungsoptionen.

InlineTranslationOptions

Auf dieser Seite