# gt-react: General Translation React SDK: Num
URL: https://generaltranslation.com/zh/docs/react/api/components/num.mdx
---
title: Num
description: Num 组件 API 参考
---

{/* 自动生成：请勿直接编辑。请改为编辑 content/docs-templates/ 中的模板。 */}


## 概述

`<Num>` 组件会根据用户的区域设置渲染格式化后的数字字符串，并且可通过格式化选项进行自定义。

```jsx
<Num>{100}</Num>
// 输出：100
```

所有重新格式化都在本地通过 [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 库完成。


## 参考

### 属性

<TypeTable
  type={{
  "children?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.NumberFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### 说明

| 属性         | 说明                                                                                                                                                                                 |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | 在组件内渲染的内容。通常是一个数字，会根据当前区域设置和选项进行格式化。如果提供了该属性，则其优先级高于 `value` 属性。                                                                                                                   |
| `name`     | 数字字段的可选名称，用于元数据。                                                                                                                                                                   |
| `value`    | 数字的默认值。可以是字符串或数字。字符串会在格式化前解析为数字。                                                                                                                                                   |
| `options`  | 数字的可选格式化选项，遵循 [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 规范。可用于定义货币、小数精度等格式样式。               |
| `locales`  | 可选的 `locales`，用于指定格式化时使用的区域设置。如果未提供，则使用用户的默认区域设置。有关如何指定 `locales`，请参阅[此处](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)。 |

### 返回值

内容为格式化后数字字符串的 `JSX.Element`。

***

## 示例

### 基本示例

在这个示例中，`item.quantity` 会根据用户的区域设置重新格式化。

```jsx title="QuantityDisplay.jsx" copy
import { Num } from 'gt-react';

export default function Inventory(item) {
  return (
    <Num> {item.quantity} </Num>  // [!code highlight]
  );
}
```

### 指定区域设置

默认情况下，区域设置由用户的浏览器设置决定，
但你也可以为 `<Num>` 组件显式指定区域设置。

```jsx title="PriceDisplay.jsx" copy
import { Num } from 'gt-react';

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


### 在句子中翻译 Num 组件

假设你想把数字放进一个需要翻译的较长句子中。
只需在内容外面加上 `<T>` 组件即可。

```jsx title="DynamicPriceDisplay.jsx" copy
import { T, Num } from 'gt-react';

export default function DynamicPriceDisplay(item) {
  return (
    <T id="price">
      There are <Num> {item.count} </Num> units available. // [!code highlight]
    </T>
  );
}
```


### 自定义格式

`<Num>` 使用 [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 库来进行格式化。

```jsx
import { Num } from 'gt-react';

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

***


## 说明

* `<Num>` 组件用于根据用户的区域设置对数字进行格式化。
* 在 `<T>` 组件内时，请务必将所有动态数字都包裹在 `<Num>` 组件中。

## 后续步骤

* 如需了解 `<Num>` 组件以及 `<Currency>`、`<DateTime>`、`<Var>` 等其他变量组件的更多信息和使用示例，请参阅[使用变量组件](/docs/react/guides/variables)文档。