InlineTranslationOptions

Überblick

Der InlineTranslationOptions Typ wird verwendet, um Variablen an Inline-Übersetzungen zu übergeben und ihr Render-Verhalten zu spezifizieren. Sie können auch Kontext und eine Kennung zur Übersetzung hinzufügen. Er wird mit useGT() und getGT() verwendet, um Variablen an Inline-String-Übersetzungen zu übergeben.

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

Referenz

Parameter

Prop	Type	Default
`variables??`	`Record<string, any>`	`undefined`

Beschreibung

Prop	Beschreibung
`variables`	Ein Objekt, bei dem die Schlüssel identifizieren, wo jeder Wert in der Zeichenkette zugeordnet wird.
`$context`	Optional `$context` als Variable im `variables`-Objekt einschließen, um Kontext für den Inhalt bereitzustellen (wird für die Übersetzung verwendet).
`$id`	Optional `$id` als Variable im `variables`-Objekt einschließen, um eine Kennung für die Verwendung mit dem Übersetzungseditor bereitzustellen.

Beispiele

Kontext

Um Kontext zu der Zeichenkette hinzuzufügen, verwenden wir die $context Eigenschaft.

Component.tsx

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>{t('Hello, world!', { $context: 'a formal greeting' })}</div>;
};

Variablen übergeben

Um eine Variable zu der Zeichenkette hinzuzufügen, verwenden wir die {variable-name} Syntax, wobei geschweifte Klammern den Namen der Variable umschließen.

Component.tsx

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>{t('Hello, {username}! How is your day?', { username: 'Brian123' })}</div>;
};

Verwendung des ICU-Nachrichtenformats

gt-next unterstützt das ICU-Nachrichtenformat, welches es Ihnen ermöglicht, auch Ihre Variablen zu formatieren.

Component.tsx

import { useGT } from 'gt-next';

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

Siehe die ICU-Nachrichtenformat-Dokumentation für weitere Informationen zum ICU-Nachrichtenformat.

Notizen

InlineTranslationOptions wird für String-Übersetzungen 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 zu Inline-String-Übersetzungen.
Siehe ICU message format für weitere Informationen zu Formatierungsoptionen.

InlineTranslationOptions

Auf dieser Seite