Types

InlineTranslationOptions

API Reference für den Typ InlineTranslationOptions

Übersicht

Der Typ InlineTranslationOptions wird verwendet, um variables an Inline-Übersetzungen zu übergeben und deren Renderverhalten festzulegen. Sie können der Übersetzung außerdem Kontext und eine Kennung hinzufügen. Er wird zusammen mit useGT, getGT und msg verwendet, um variables an Inline-Zeichenkettenübersetzungen zu übergeben.

Buildtime Translation: variables werden mit useGT, getGT und msg nicht übersetzt, sondern nur die ursprüngliche Zeichenkette. Siehe tx zum Übersetzen von Zeichenketten mit dynamischem Inhalt.

Referenzen

Parameter

Prop

Type

Beschreibung

PropBeschreibung
variablesEin Objekt, in dem die Schlüssel angeben, welchem Wert in der Zeichenfolge sie jeweils zugeordnet werden.
$contextOptional kann $context als Variable im variables-Objekt angegeben werden, um Kontext für den Inhalt bereitzustellen (für die Übersetzung verwendet).
$idOptional kann $id als Variable im variables-Objekt angegeben werden, um eine Kennung für die Verwendung im Übersetzungseditor bereitzustellen.

Beispiele

Kontext

Um einer Zeichenfolge Kontext hinzuzufügen, verwenden wir das $context-Prop.

Component.tsx
import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>{t('Guten Tag, Welt!', { $context: 'formelle Begrüßung' })}</div>;
};

Variablen übergeben

Um eine Variable in eine Zeichenfolge einzufügen, verwenden wir die {variable-name}-Syntax, bei der geschweifte Klammern den Variablennamen einschließen.

Component.tsx
import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>{t('Hallo, {username}! Wie ist dein Tag?', { username: 'Brian123' })}</div>;
};

Verwendung des ICU Message Format

gt-next unterstützt das ICU Message Format, mit dem Sie auch Ihre variables formatieren können.

Component.tsx
import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>
    { t(
      'Ihr Kontostand: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};

Siehe die ICU message format documentation für weitere Informationen zum ICU message format.


Hinweise

  • InlineTranslationOptions wird für Inline-Übersetzungen von Strings verwendet.
  • Das Objekt variables übergibt Werte an den Text.
  • Das Objekt variablesOptions definiert das Verhalten der Variablen.

Nächste Schritte

  • Weitere Informationen zu Inline-String-Übersetzungen finden Sie unter useGT und getGT.
  • Weitere Informationen zu Formatierungsoptionen finden Sie im ICU message format.

Wie ist dieser Leitfaden?

InlineTranslationOptions