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