Components
货币
<Currency> 组件 API 参考
概览
<Currency> 组件会将数值渲染为货币。
数值会根据当前 locale 和传入的可选参数进行格式化。
该组件仅负责格式化，不进行任何汇率换算。
<Currency>{100}</Currency>
// 输出：$100.00所有重格式化均在本地通过 Intl.NumberFormat 库完成。
参考资料
属性
Prop
Type
说明
| Prop | 说明 |
|---|---|
children | 要在组件内部渲染的内容。通常是一个需要格式化为货币的数值。如果提供，则优先于 value 属性。 |
name | 货币字段的可选名称，用于元数据。 |
value | 货币的默认值。未提供时将回退到 children。可以是字符串或数字。字符串在格式化前会解析为数字。 |
currency | 货币类型，如“USD”或“EUR”。用于决定货币符号与格式。 |
options | 货币的可选格式化选项，遵循 Intl.NumberFormatOptions 规范。可用于定义最大小数位、分组等样式。 |
locales | 可选的 locale，用于指定格式化所使用的区域设置。若未提供，将使用用户的默认区域设置。关于指定 locale 的更多信息见此处。 |
返回值
包含格式化货币字符串的 JSX.Element。
示例
基本示例
<Currency> 组件可用于显示本地化的货币金额。
import { Currency } from 'gt-react';
export default function PriceDisplay(item) {
return (
<Currency> {item.price} </Currency>
);
}指定货币
这里我们以欧元显示价格。
import { Currency } from 'gt-react';
export default function PriceDisplay(item) {
return (
<Currency currency="EUR"> {item.price} </Currency>
);
}翻译 <Currency> 组件
如果你想在一段会被翻译的句子中显示货币，可以将 <Currency> 组件包裹在 <T> 组件中。
import { T, Currency } from 'gt-react';
export default function PriceDisplay(item) {
return (
<T id="itemPrice"> // [!code highlight]
价格为 <Currency> {item.price} </Currency>。
</T>
);
}自定义格式
此处我们以 GBP 显示价格，精确指定小数位数，并使用货币的窄符号（例如 “$100”，而不是 “US$100”）。 在 Intl.NumberFormatOptions 文档中了解更多可用选项。
import { Currency } from 'gt-react';
export default function PriceDisplay(item) {
return (
<Currency
currency="GBP"
options={{
currencyDisplay: 'narrowSymbol',
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}}
>
{item.price}
</Currency>
);
}注意事项
<Currency>组件用于根据当前 locale 以及传入的可选参数对货币 value 进行格式化。- 该组件仅负责格式化，不执行任何汇率换算。
<Currency>组件的内容不会发送到 API 进行翻译。 所有格式化均在本地通过Intl.NumberFormat库完成。
下一步
- 如需了解
<Currency>组件以及<Num>、<DateTime>、<Var>等其他变量组件的更多详情与使用示例，
本指南如何?