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