RuntimeTranslationOptions

Übersicht

Der RuntimeTranslationOptions Typ wird verwendet, um Variablen an Inline-Übersetzungen zu übergeben und ihr Render-Verhalten zu spezifizieren. Sie können auch ein Locale hinzufügen, um eine andere Sprache für die Übersetzung anzugeben. Dies wird mit der tx() Funktion verwendet.

Laufzeit-Übersetzung: Um eine Variable bei Bedarf zu übersetzen, fügen Sie sie direkt in den String ein, der an tx() übergeben wird. Variablen, die über das options Objekt an tx() übergeben werden, werden nicht übersetzt.

Referenz

Parameter

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

Beschreibung

Prop	Beschreibung
`variables`	Ein Objekt, bei dem die Schlüssel identifizieren, wo jeder Wert in der Zeichenkette zugeordnet wird.
`$locale`	Optional `$locale` als Variable im `variables`-Objekt einschließen, um eine Sprache für die Übersetzung anzugeben. Standardmäßig wird die vom Browser bevorzugte Sprache verwendet, die von Ihrer App unterstützt wird.

Beispiele

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 { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    {tx(`Hello, {username}!`,{ 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 { tx } from 'gt-next/server';

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

Variablen übersetzen

Um eine Variable zu übersetzen, fügen Sie sie direkt in den String ein, der an tx() übergeben wird.

Component.tsx

import { tx } from 'gt-next/server';

const Component = ({ hairColor }: { hairColor: string }) => {
  return <div>{tx(
    `Hello, {username}! Your haircolor is ${hairColor}`,
    { username: 'Brian123' }
  )}</div>;
};

Beachten Sie, dass die Variable hairColor übersetzt wird, username jedoch nicht.

Eine Sprache angeben

Sie können eine Sprache angeben, die für die Übersetzung verwendet werden soll.

Component.tsx

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>{tx('Hello, world!', { $locale: 'fr' })}</div>;
};

Dies wird immer ins Französische übersetzt.

Notizen

RuntimeTranslationOptions wird für String-Übersetzungen zur Laufzeit verwendet.
Das variables-Objekt übergibt Werte an den Text.
Das variablesOptions-Objekt definiert das Verhalten der Variablen.

Nächste Schritte

Siehe tx() für weitere Informationen zu Inline-String-Übersetzungen.
Siehe ICU message format für weitere Informationen zu Formatierungsoptionen.

RuntimeTranslationOptions

Auf dieser Seite