Überblick

Die <Num>-Komponente gibt eine formatierte Zahl als Zeichenfolge in der Spracheinstellung (locale) des Benutzers aus und kann mit Formatierungsoptions angepasst werden.

<Num>{100}</Num>
// Ausgabe: 100

Alle Formatierungen erfolgen lokal mithilfe der Bibliothek Intl.NumberFormat.

Referenz

Props

Beschreibung

Rückgabe

JSX.Element, der die formatierte Zahl als String enthält.

Beispiele

Einfaches Beispiel

In diesem Beispiel wird item.quantity entsprechend der Locale des Nutzers neu formatiert.

import { Num } from 'gt-react';

export default function Inventory(item) {
  return (
    <Num> {item.quantity} </Num>  
  );
}

Festlegen von locales

Standardmäßig werden locales durch die Browsereinstellungen des Nutzers bestimmt, aber Sie können die locale für die <Num>-Komponente ausdrücklich festlegen.

import { Num } from 'gt-react';

export default function CountDisplay(item) {
  return (
    <Num locales={['fr-FR']}> {item.count} </Num> 
  );
}

Übersetzen von <Num>-Komponenten

Angenommen, Sie möchten eine Zahl in einen längeren, zu übersetzenden Satz einbetten. Fügen Sie einfach <T>-Komponenten um den Inhalt hinzu.

import { T, Num } from 'gt-react';

export default function DynamicPriceDisplay(item) {
  return (
    <T id="price">
      Es sind <Num> {item.count} </Num> Stück verfügbar. // [!code highlight]
    </T>
  );
}

Benutzerdefinierte Formatierung

<Num> nutzt die Bibliothek Intl.NumberFormat zum Formatieren.

import { Num } from 'gt-react';

export default function CustomFormat(number) {
  return (
    <Num
      options={{ style: "decimal", maximumFractionDigits: 2 }}
    >
      {number}
    </Num>
  );
}

Hinweise

• Die <Num>-Komponente formatiert Zahlen gemäß der locale des Nutzers.
• Wenn sie innerhalb einer <T>-Komponente verwendet wird, achten Sie darauf, alle dynamischen Zahlen in eine <Num>-Komponente zu kapseln.

Nächste Schritte

• Weitere Details und Use‑Cases zur <Num>-Komponente sowie zu anderen Variablenkomponenten wie <Currency>, <DateTime> und <Var>,