Übersicht

Die Komponente <Num> rendert eine formatierte Zahlenzeichenfolge in der locale des Benutzers und kann mit formatting options angepasst werden.

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

Alle Formatierungen erfolgen lokal mit der Bibliothek Intl.NumberFormat.

Referenzen

Props

Beschreibung

Rückgabewert

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 Bestand(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 explizit 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">
      <Num> {item.count} </Num> Einheiten verfügbar. // [!code highlight]
    </T>
  );
}

Benutzerdefiniertes Formatieren

<Num> verwendet 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 Komponente <Num> wird verwendet, um Zahlen entsprechend der locale eines Benutzers zu formatieren.
• Wenn sie innerhalb einer <T>-Komponente verwendet wird, achten Sie darauf, alle dynamischen Zahlen in eine <Num>-Komponente zu setzen.

Nächste Schritte

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