Components
Num
<Num> 组件 API 参考
概述
<Num> 组件会根据用户的 locale 渲染格式化的数字字符串，并可通过格式化 options 进行自定义。
<Num>{100}</Num>
// 输出: 100所有重格式化工作均在本地完成，使用 Intl.NumberFormat 库。
参考资料
属性
Prop
Type
描述
| Prop | 描述 |
|---|---|
children | 组件内部要渲染的内容。通常为数字，将按照当前的 locale 和 options 进行格式化。如提供，则优先于 value 属性生效。 |
name | 数值字段的可选名称，用于元数据。 |
value | 数值的默认值。可以是字符串或数字。字符串会在格式化前先解析为数字。 |
options | 数值的可选格式化 options，遵循 Intl.NumberFormatOptions 规范。可用于定义货币、小数位数等样式。 |
locales | 可选的 locales，用于指定格式化所用的 locale。若未提供，则使用用户的默认 locale。关于指定 locales 的更多信息请参见此处。 |
返回
包含格式化后数字字符串的 JSX.Element。
示例
基本示例
在本示例中，item.quantity 将根据用户的 locale 进行重新格式化。
import { Num } from 'gt-react';
export default function Inventory(item) {
return (
<Num> {item.quantity} </Num>
);
}指定 locales
默认情况下，locales 由用户的浏览器设置决定，
但你也可以为 <Num> 组件显式指定 locale。
import { Num } from 'gt-react';
export default function CountDisplay(item) {
return (
<Num locales={['fr-FR']}> {item.count} </Num>
);
}翻译 <Num> 组件
假设你想把数字放在一条较长、需要被翻译的句子里。
只需在内容外层包一层 <T> 组件即可。
import { T, Num } from 'gt-react';
export default function DynamicPriceDisplay(item) {
return (
<T id="price">
有 <Num>{item.count}</Num> 个单位可用。 // [!code highlight]
</T>
);
}自定义格式
<Num> 使用 Intl.NumberFormat 库进行格式化。
import { Num } from 'gt-react';
export default function CustomFormat(number) {
return (
<Num
options={{ style: "decimal", maximumFractionDigits: 2 }}
>
{number}
</Num>
);
}注意
<Num>组件用于按照用户的 locale 对数字进行格式化。- 在
<T>组件内时，请确保用<Num>组件包裹所有动态数字。
下一步
- 如需了解
<Num>组件以及其他变量组件（如<Currency>、<DateTime>和<Var>）的更多细节与使用示例，
这份指南怎么样？