Components
<Num>
<Num> 组件 API 参考
概览
<Num> 组件会按照用户的 locale 渲染格式化的数字字符串，并可通过 formatting options 进行自定义。
<Num>{100}</Num>
// 输出：100所有重格式化操作均在本地通过 Intl.NumberFormat 库完成。
参考资料
Props
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>等其他变量组件的更多详细信息和使用示例，
本指南如何?