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

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

## 概述

`<Currency>` 组件会将数值渲染为货币金额。
该数值会根据当前区域设置以及传入的可选参数进行格式化。
`<Currency>` 组件仅负责格式化，不执行任何汇率换算。

```jsx
<Currency>{100}</Currency>
// 输出：$100.00
```

所有重新格式化都在本地通过 [`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?": {
      description: '可选值。若未提供，则使用 children 作为值。',
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "currency?": {
      type: 'string',
      optional: true,
      default: '"USD"',
  },
  "options?": {
      type: 'Intl.NumberFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### 说明

| Prop       | Description                                                                                                                                                                         |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | 在组件内渲染的内容。通常是一个数字，表示要格式化为货币的值。如果提供了该属性，则其优先级高于 `value` prop。                                                                                                                        |
| `name`     | 货币字段的可选名称，用于元数据。                                                                                                                                                                    |
| `value`    | 货币的默认值。如果未提供，则回退到 `children`。可以是字符串或数字。字符串会在格式化前解析为数字。                                                                                                                              |
| `currency` | 货币类型，例如 &quot;USD&quot; 或 &quot;EUR&quot;。它决定了该货币使用的符号和格式。                                                                                                                          |
| `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`。

***

## 示例

### 基本示例

`<Currency>` 组件可用于显示本地化的货币金额。

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react'; // [!code highlight]

export default function PriceDisplay(item) {
    return (
        <Currency> {item.price} </Currency> // [!code highlight]
    );
}
```

### 指定币种

这里的价格以欧元显示。

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

export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> // [!code highlight]
  );
}
```

### 翻译 Currency 组件

如果你想让货币显示在一个也需要翻译的句子中，
可以将 `<Currency>` 组件包裹在 `<T>` 组件中。

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

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice"> // [!code highlight]
      The price is <Currency> {item.price} </Currency>.
    </T> // [!code highlight]
  );
}
```

### 自定义格式

这里以 GBP 显示价格，可精确指定小数位数，并为货币使用窄符号 (即显示为 &quot;$100&quot; 而不是 &quot;US$100&quot;) 。
更多选项请参阅 [Intl.NumberFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)。

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

export default function PriceDisplay(item) {
  return (
    <Currency
      currency="GBP"
      options={{ // [!code highlight]
        currencyDisplay: 'narrowSymbol', // [!code highlight]
        minimumFractionDigits: 2, // [!code highlight]
        maximumFractionDigits: 2, // [!code highlight]
      }} // [!code highlight]
    >
      {item.price}
    </Currency>
  );
}
```

***

## 说明

* `<Currency>` 组件用于根据当前区域设置和传入的可选参数格式化货币值。
* `<Currency>` 组件仅负责格式化，不会执行任何汇率计算。
* `<Currency>` 组件中的内容不会发送到 API 进行翻译。
  所有格式化都在本地通过 [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 库完成。

## 后续步骤

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