react intl formatted duration
v4.0.0
react-intl 是一个令人惊叹的库，提供 React 组件和 API 来本地化您的应用程序，但它缺少Duration组件。
如果您想显示完成1 minute或5 minutes之类的事情所需的时间，甚至是一个简单的计时器0:30那么您就不走运了，因为 ECMA 委员会尚未指定 DurationFormat。
该组件提供了一个非常简单的抽象，适用于 React (DOM)、React Native 和任何其他目标环境，以格式化简单的持续时间。
npm i --save react-intl-formatted-duration
// Using React DOM
import React from 'react' ;
import FormattedDuration from 'react-intl-formatted-duration' ;
export default MyComponent ( ) {
return < FormattedDuration seconds = { 60 } / >
// will render `1 minute`
}默认格式仅显示分钟和秒。对于更复杂的需求，请检查自定义格式部分。
默认情况下，输出文本包含在span中，您可以指定目标环境中可用的任何组件：
// Using React Native
import React from 'react' ;
import FormattedDuration from 'react-intl-formatted-duration' ;
import { Text } from 'react-native' ;
export default MyComponent ( ) {
return < FormattedDuration seconds = { 60 } textComponent = { Text } / >
// will render `1 minute`
} // Using styled components
import React from 'react' ;
import FormattedDuration from 'react-intl-formatted-duration' ;
import styled from 'styled-components' ;
const Text = styled . span `` ;
export default MyComponent ( ) {
return < FormattedDuration seconds = { 60 } textComponent = { Text } / >
// will render `1 minute`
} 如果您想要将数字设置为与文本不同的样式，您可以传递valueComponent
< FormattedDuration seconds = { 90 } textComponent = { Text } valueComponent = { Value } / >
// renders
< Value > 1 < / Value> minute< / Text > < Value > 30 < / Value > < Text > seconds < / Text>拥有不同的组件不仅对于样式有用。某些语言使用不同的编号系统。例如，日语有全角数字，因此您可能想要渲染１０分而不是10分，为此您可以使用：
import React from 'react' ;
import { FormattedNumber } from 'react-intl' ;
import FormattedDuration from 'react-intl-formatted-duration' ;
/*
You'll also need to select Japanese locale and configure the IntlProvider to use
`ja-JP-u-nu-fullwide`
Somewhere in you application
import { IntlProvider } from 'react-intl';
locale="ja-JP-u-nu-fullwide"
/>
*/
export default MyComponent ( ) {
return < FormattedDuration seconds = { 600 } textComponent = { Text } valueComponent = { FormattedNumber } / >
// will render `１０分`
} 默认情况下，该组件仅呈现分钟和秒，如果您想显示小时或天，您可以使用自定义格式：
< FormattedDuration seconds = { 180000 } format = "{days} {hours} {minutes} {seconds}" / >
// will render `2 days 2 hours`
< FormattedDuration seconds = { 180000 } format = "{hours} {minutes} {seconds}" / >
// will render `50 hours`
< FormattedDuration seconds = { 180000 } format = "{minutes} {seconds}" / >
// will render `3000 minutes`
}秒也是可选的，如果缺少，分钟将四舍五入到关闭值
< FormattedDuration seconds = { 10 } format = "{minutes}" / >
// will render `0 minutes`
< FormattedDuration seconds = { 30 } format = "{minutes}" / >
// will render `1 minute`
< FormattedDuration seconds = { 70 } format = "{minutes}" / >
// will render `1 minute`自定义格式本身可以通过传递消息 ID 而不是实际值来本地化
import React from 'react' ;
import FormattedDuration from 'react-intl-formatted-duration' ;
import messages from './messages' ;
export default MyComponent ( ) {
return (
< FormattedDuration
seconds = { 600 }
format = { messages . customFormat . id }
/ >
) ;
} 虽然format允许选择要渲染的单元， unitDisplay允许配置每个单元的渲染方式。
< FormattedDuration seconds = { 60 } unitDisplay = "long" / >
// will render `1 minute`
< FormattedDuration seconds = { 60 } unitDisplay = "short" / >
// will render `1 min`
< FormattedDuration seconds = { 60 } unitDisplay = "narrow" / >
// will render `1m` import FormattedDuration , { TIMER_FORMAT } from 'react-intl-formatted-duration' ;
export default MyComponent ( ) {
return < FormattedDuration seconds = { 60 } format = { TIMER_FORMAT } / >
// will render `1:00`
} react-intl-formatted-duration需要翻译文件中包含以下键
react-intl-formatted-duration.longFormatting生成类似1 minute 30 seconds的默认格式。它使用值{days} 、 {hours} 、 {minutes}和{seconds} 。例如，您可以将其更改为{minutes} and {seconds} 。react-intl-formatted-duration.duration上述minutes和seconds变量使用的格式。它使用值{value}和{unit} 。默认值为{value} {unit}其中value是数字， {unit}是文本单位，例如minute(s)或second(s) 。react-intl-formatted-duration.timerFormatting TIMER_FORMAT的格式化格式，默认为{minutes}:{seconds}其中两个值都是填充的数字，最小长度为2个字符react-intl-formatted-duration.daysUnit用于格式化天数的字符串，默认{value, plural, one {day} other {days}}react-intl-formatted-duration.hoursUnit用于格式化小时的字符串，默认{value, plural, one {hour} other {hours}}react-intl-formatted-duration.minutesUnit用于格式化分钟的字符串，默认{value, plural, one {minute} other {minutes}}react-intl-formatted-duration.secondsUnit用于格式化秒的字符串，默认{value, plural, one {second} other {seconds}} daysUnit 、 hoursUnit 、 minutesUnit 、 secondsUnit的消息使用 format-js 语法，并且仅在未指定unitDisplay时使用。
如果您使用react-boilerplate 中的extract-intl脚本，您可以导入react-intl-formatted-duration/messages以自动在翻译文件中生成密钥。
2.x版本允许使用 format-js 消息语法的全部功能。您需要做的就是删除所有键，例如daysSingular 、 dayPlural ，然后简单地使用具有上述格式的daysUnit 。
版本3.x具有与版本2.x完全相同的 API，但完全重写。您不需要更改您的代码。
版本4.x不会更改版本3.x的任何默认行为，仅包含新功能。然而，它在内部将intl-unofficial-duration-unit-format的版本从1.x提升到3.x ，现在要求Intl.NumberFormat在全球范围内可用。如果你已经正确安装了react-intl ，那么你很可能不需要更改你的代码。
