<Num>

Übersicht

Die <Num> Komponente rendert eine formatierte Zahlenzeichenkette in der Spracheinstellung des Benutzers und kann mit Formatierungsoptionen angepasst werden.

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

Die gesamte Umformatierung erfolgt lokal mit der Intl.NumberFormat Bibliothek.

Referenz

Props

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

Beschreibung

Prop	Beschreibung
`children`	Der Inhalt, der innerhalb der Komponente gerendert wird. In der Regel eine Zahl, die entsprechend der aktuellen Sprache und Optionen formatiert wird. Falls angegeben, hat dieser Wert Vorrang vor der `value`-Prop.
`name`	Optionaler Name für das Zahlenfeld, der für Metadaten verwendet wird.
`value`	Der Standardwert für die Zahl. Kann ein String oder eine Zahl sein. Strings werden vor der Formatierung in Zahlen umgewandelt.
`options`	Optionale Formatierungsoptionen für die Zahl, entsprechend der `Intl.NumberFormatOptions` Spezifikation. Verwenden Sie dies, um Stile wie Währung, Dezimalstellen usw. zu definieren.
`locales`	Optionale Sprachen, um das Formatierungsgebietsschema festzulegen. Wenn nicht angegeben, wird die Standardsprache des Benutzers verwendet. Mehr über die Angabe von Sprachen erfahren Sie hier.

Rückgabewert

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

Beispiele

Einfaches Beispiel

In diesem Beispiel wird item.quantity entsprechend der Spracheinstellung des Benutzers formatiert.

QuantityDisplay.jsx

import { Num } from 'gt-react';

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

Lokalisierungen angeben

Standardmäßig werden die Lokalisierungen durch die Browsereinstellungen des Benutzers bestimmt, aber Sie können die Locale für die <Num> Komponente explizit festlegen.

PriceDisplay.jsx

import { Num } from 'gt-react';

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

`<Num>` Komponenten übersetzen

Angenommen, Sie möchten, dass Ihre Zahl in einem längeren, übersetzten Satz erscheint. Fügen Sie einfach die <T> Komponenten um den Inhalt herum hinzu.

DynamicPriceDisplay.jsx

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

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

Benutzerdefiniertes Formatieren

<Num> verwendet die Intl.NumberFormat Bibliothek zur Formatierung.

import { Num } from 'gt-react';

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

Hinweise

Die <Num> Komponente wird verwendet, um Zahlen entsprechend der Spracheinstellung des Nutzers zu formatieren.
Wenn Sie sich innerhalb einer <T> Komponente befinden, stellen Sie sicher, dass alle dynamischen Zahlen in eine <Num> Komponente eingeschlossen werden.

Nächste Schritte

Weitere Details und Anwendungsbeispiele für die <Num>-Komponente sowie andere Variablenkomponenten wie <Currency>, <DateTime> und <Var> findest du in der Dokumentation zur Verwendung von Variablenkomponenten.

<Num>

Auf dieser Seite