<Currency>

Überblick

Die <Currency> Komponente rendert einen numerischen Wert als Währung. Die Zahl wird basierend auf der aktuellen Spracheinstellung und allen übergebenen optionalen Parametern formatiert. Die Währungskomponente übernimmt nur die Formatierung und führt keine Wechselkursberechnungen durch.

<Currency>{100}</Currency>
// Ausgabe: $100.00

Alle Umformatierungen werden lokal mit der Intl.NumberFormat Bibliothek durchgeführt.

Referenz

Props

Prop	Type	Default
`children??`	`any`	`undefined`
`name??`	`string`	`undefined`
`value??`	`string \| number`	`undefined`
`currency??`	`string`	`"USD"`
`options??`	`Intl.NumberFormatOptions`	`{}`
`locales??`	`string[]`	`undefined`

Beschreibung

Prop	Beschreibung
`children`	Der Inhalt, der innerhalb der Komponente gerendert werden soll. Typischerweise eine Zahl, die als Währung formatiert werden soll. Wenn angegeben, hat es Vorrang vor der `value`-Prop.
`name`	Optionaler Name für das Währungsfeld, der für Metadatenzwecke verwendet wird.
`value`	Der Standardwert für die Währung. Fällt auf Kinder zurück, wenn nicht angegeben. Kann eine Zeichenkette oder eine Zahl sein. Zeichenketten werden vor der Formatierung in Zahlen umgewandelt.
`currency`	Der Währungstyp, wie "USD" oder "EUR". Dies bestimmt das Symbol und die Formatierung, die für die Währung verwendet werden.
`options`	Optionale Formatierungsoptionen für die Währung, gemäß der `Intl.NumberFormatOptions` Spezifikation. Verwenden Sie dies, um Stile wie maximale Nachkommastellen, Gruppierung usw. zu definieren.
`locales`	Optionale Lokalisierungen, um die Formatierungslokale anzugeben. Wenn nicht angegeben, wird die Standardbenutzerlokale verwendet. Lesen Sie mehr über die Angabe von Lokalisierungen hier.

Rückgabewert

JSX.Element, das die formatierte Währung als Zeichenkette enthält.

Beispiele

Einfaches Beispiel

Die <Currency> Komponente kann verwendet werden, um lokalisierte Währungswerte anzuzeigen.

PriceDisplay.jsx

import { Currency } from 'gt-next';
 
export default function PriceDisplay(item) {
  return (
    <Currency> {item.price} </Currency>
  );
}

Währung angeben

Hier zeigen wir den Preis in Euro an.

PriceDisplay.jsx

import { Currency } from 'gt-next';
 
export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> 
  );
}

Übersetzen von `<Currency>` Komponenten

Angenommen, Sie möchten, dass die Währung in einem Satz angezeigt wird, der ebenfalls übersetzt wird. Sie können die <Currency> Komponente in eine <T> Komponente einbetten.

PriceDisplay.jsx

import { T, Currency } from 'gt-next';
 
export default function PriceDisplay(item) {
  return (
    <T id="itemPrice">
      Der Preis ist <Currency> {item.price} </Currency>.
    </T> 
  );
}

Benutzerdefinierte Formatierung

Hier zeigen wir den Preis in GBP an, der genau die Dezimalstellen angibt und das schmale Symbol für die Währung verwendet (d.h. "$100" anstelle von "US$100"). Lesen Sie mehr über die Intl.NumberFormatOptions für weitere Optionen.

PriceDisplay.jsx

import { Currency } from 'gt-next';
 
export default function PriceDisplay(item) {
  return (
    <Currency
      currency="GBP"
      options={{ 
        currencyDisplay: 'narrowSymbol', 
        minimumFractionDigits: 2, 
        maximumFractionDigits: 2, 
      }} 
    >
      {item.price}
    </Currency>
  );
}

Notizen

Die <Currency> Komponente wird verwendet, um Währungswerte basierend auf der aktuellen Spracheinstellung und allen übergebenen optionalen Parametern zu formatieren.
Die Währungskomponente übernimmt nur die Formatierung und führt keine Wechselkursberechnungen durch.
Der Inhalt der <Currency> Komponente wird nicht an die API zur Übersetzung gesendet. Alle Umformatierungen werden lokal mit der Intl.NumberFormat Bibliothek durchgeführt.

Nächste Schritte

Für weitere Details und Anwendungsbeispiele des <Currency>-Komponenten und anderer Variablenkomponenten wie <Num>, <DateTime> und <Var>, siehe die Verwendung von Variablenkomponenten Dokumentation.

<Currency>

Auf dieser Seite