Types

DictionaryTranslationOptions

API Reference für den Typ DictionaryTranslationOptions

Überblick

Der Typ DictionaryTranslationOptions wird verwendet, um Variablen an Wörterbucheinträge zu übergeben und deren Renderverhalten festzulegen. Er wird zusammen mit useTranslations genutzt, um Variablen an Wörterbucheinträge zu übergeben.

Buildtime Translation: useTranslations-Übersetzungen erfolgen zur Buildtime; Variablen werden jedoch nie übersetzt. Stattdessen werden sie formatiert in die Übersetzung eingefügt. Achte darauf, der Deployment-Anleitung zu folgen.

Referenz

Parameter

Prop

Type

Beschreibung

PropBeschreibung
variablesEin Objekt, dessen Schlüssel angeben, wohin jeder value im Wörterbuch-Entry gemappt wird.

Beispiele

Variablen übergeben

Um eine Variable an den Wörterbucheintrag zu übergeben, müssen wir zwei Dinge tun: (1) eine Variable zum Eintrag hinzufügen und (2) diese Variable im Aufruf von d referenzieren.

Zuerst fügen wir dem Wörterbucheintrag mit der folgenden Syntax eine Variable hinzu: {username}. username ist der Name der Variable.

dictionary.ts
const dictionary = {
  greeting: {
    hello: 'Hallo, {username}!',
  },
};

export default dictionary;

Als Nächstes referenzieren wir die Variable:

Component.tsx
import { useTranslations } from 'gt-react';

const Component = () => {
  const d = useTranslations();
  return <div>{d('greeting.hello', { username : 'Brian123' })}</div>;
};

Verwendung des ICU Message Formats

gt-react unterstützt das ICU Message Format, mit dem Sie auch Variablen formatieren können.

dictionary.ts
const dictionary = {
  account: {
    balance: 'Ihr Kontostand: {dollars, number, ::currency/USD}!',
  },
};

export default dictionary;

Als Nächstes greifen wir auf die Variable zu:

Component.tsx
import { useTranslations } from 'gt-react';

const Component = () => {
  const d = useTranslations();
  return <div>
    { d(
      'account.balance',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};

Hinweise

  • Das variables-Objekt übergibt Werte an einen Wörterbuch-Eintrag.
  • Das variablesOptions-Objekt definiert das Verhalten der Variablen.

Nächste Schritte

  • Siehe Wörterbücher für weitere Informationen zu Wörterbüchern und gängigen Praktiken.
  • Siehe useTranslations für weitere Informationen zur Wörterbuch-Schnittstelle.
  • Siehe ICU message format für weitere Informationen zu Formatierungsoptionen.

Wie ist diese Anleitung?