Everything You Need 至 Know About 反应 时刻s
安装-
需要节点6.4.0或更高版本。使用npm install 反应片刻及其对等项依赖关系。 npm安装–节省瞬间反应
时区支持-
需要使用时区软件包才能使用与时区相关的功能。
npm安装–save 时区
下一步是将包导入到您的项目中。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
进口 ‘moment-timezone’;
出口 默认 类 应用程式 延伸 反应零件 {
…
}
快速开始-
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
const 日期ToFormat = ‘1976-04-19T12：59-0500’;
<时刻>{dateToFormat}</时刻>
);
}
}
输出：
<时间>1976年4月19日星期一12:59:00 GMT-0500</时间>
如果您更喜欢使用属性而不是孩子的日期来传递日期，则上面给出的示例也可以用另一种方式编写<Moment>.
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
const 日期ToFormat = ‘1976-04-19T12：59-0500’;
<时刻 日期= {dateToFormat} />
);
}
}
我们提到的日期值可以是字符串，对象，数组或日期实例：
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
const 日期ToFormat = 新 日期（‘1976-04-19T12：59-0500’）;
<时刻 日期= {dateToFormat} />
);
}
}
道具-
该组件支持以下道具：
1) 间隔
间隔= {number}
默认情况下，时间每60秒（60000毫秒）更新一次。您可以使用间隔道具来更改或禁用更新。
This updates the 时间 every 30 seconds.
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 间隔= { 30000}>
1976–04–19T12:59–0500
</时刻>
);
}
}
此过程将禁用更新。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 间隔= { 0}>
1976–04–19T12:59–0500
</时刻>
);
}
}
2) 格式化
格式= {字符串}
这有助于根据给定的格式字符串格式化日期。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 格式=“YYYY/MM/DD”>
1976–04–19T12:59–0500
</时刻>
);
}
}
输出：
<时间>1976/04/19</时间>
3) 解析日期
解析= {string}
时刻 can 解析 the most standard 日期 格式s. Use the 解析 attribute 至 tell 时刻 how 至 解析 the given 日期 when non-standard.
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 解析=“YYYY-MM-DD HH:mm”>
1976–04–19 12:59
</时刻>
);
}
}
4) 加减
添加= {对象}
减= {对象}
用于从给定日期增加和减少时间段，这些时间段以对象文字的形式表示。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
const 日期 = 新 日期（）;
返回 (
<div>
<时刻 加= {{小时: 12 }}>{date}</时刻>
<时刻 加= {{天: 1， 小时: 12 }}>{date}</时刻>
<时刻 减去= {{小时: 12 }}>{date}</时刻>
<时刻 减去= {{天: 1， 小时: 12 }}>{date}</时刻>
</div>
);
}
}
5) 现在起-
现在起 = {bool}
有时也称为时间之前或相对时间，并将日期显示为从现在开始的时间，例如“ 5分钟之前”。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 现在起>1976–04–19T12:59–0500</时刻>
);
}
}
输出：
<时间>40 年份 前</时间>
当我们在fromNow中加入之前时，它将在相对时间中省略足够的时间。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 现在起 前>1976–04–19T12:59–0500</时刻>
);
}
}
输出：
<时间>40 年份</时间>
6) 从现在开始
现在起During = {数字}
设置fromNowDuring将有助于显示相对时间，例如fromNow，但仅在其值（以毫秒为单位）内显示，然后使用该格式。
7) 从
发件人= {string}
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 从=“2015-04-19”>1976–04–19T12:59–0500</时刻>
);
}
}
输出：
<时间>39 年份</时间>
8) 到现在
现在 = {bool}
这与fromNow非常相似，但间隔相反。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 现在>1976–04–19T12:59–0500</时刻>
);
}
}
输出：
<时间>40 年份 前</时间>
9) 至
到= {string}
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 至=“2015-04-19”>1976–04–19T12:59–0500</时刻>
);
}
}
输出：
<时间>39 年份</时间>
10) 过滤
过滤器= {功能}
在渲染之前修改/转换日期值的功能。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
const 至大写Filter = （d） => {
返回 d.至大写（）;
};
返回 (
const 日期ToFormat = ‘1976-04-19T12：59-0500’;
<时刻 过滤= {toUpperCaseFilter}>{dateToFormat}</时刻>
);
}
}
输出：
<时间>MON APR 19 1976 12:59:00 GMT-0500</时间>
11) 有标题
withTitle = {bool}
它通过向元素添加带有完成日期的title属性来帮助我们。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 格式=“D MMM YYYY” withTitle>
1976–04–19T12:59–0500
</时刻>
);
}
}
输出：
<时间 标题=“1976-04-19T12：59-0500”>19 Apr 1976</时间>
12) 标题格式
标题Format = {字符串}
这向我们展示了使用withTitle属性时标题日期的格式。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 标题Format=“D MMM YYYY” withTitle>
1976–04–19T12:59–0500
</时刻>
);
}
}
输出：
<时间 标题=“19 Apr 1976”>1976-04-19T12：59-0500</时间>
13) 区别
差异 = {string}
小数= {bool}
单元 = {string}
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<div>
<时刻 差异=“2015-04-19”>1976–04–19T12:59–0500</时刻>
<时刻 差异=“2015-04-19” 单元=“days”>1976–04–19T12:59–0500</时刻>
<时刻 差异=“2015-04-19” 单元=“years” 小数>1976–04–19T12:59–0500</时刻>
</div>
);
}
}
14) 持续时间
持续时间= {string}
日期= {字符串}
这向我们显示了两个日期之间经过的时间。持续时间属性应相对于时间落后于日期属性。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 持续时间=“2018-11-1T10:59-0500”
日期=“2018-11-1T12:59-0500”
/>
);
}
}
15) 从现在起的持续时间
持续时间FromNow = {bool}
这向我们显示了从现在到提供的日期时间之间的完成时间。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 日期=“2018-11-1T12:59-0500”
持续时间FromNow
/>
);
}
}
16) Unix时间戳
Unix = {bool}
这告诉我们将给定的日期值解析为Unix时间戳的时间。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
const UnixTimestamp = 198784740;
返回 (
<时刻 Unix>{unixTimestamp}</时刻>
);
}
}
输出：
<时间>1976年4月19日星期一12:59:00 GMT-0500</时间>
17) 本地
本地= {bool}
这样就给出了最终输出并以当地时间为结果。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 本地>
2018–11–01T12:59–0500
</时刻>
);
}
}
输出：
<时间>2018年11月1日星期四18:59:00 GMT + 0100</时间>
18) 时区
tz = {字符串}
这将设置时区并启用服务器端渲染。客户端和服务器必须基于共同的时区提供相同的日期时间。 tz属性将启用设置公共时区。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
进口 ‘moment-timezone’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
const UnixTimestamp = 198784740;
返回 (
<时刻 Unix tz=“America/Los_Angeles”>
{unixTimestamp}
</时刻>
);
}
}
输出：
<时间>1976年4月19日星期一09:59:00 GMT-0800</时间>
19) 日历
日历= {对象/布尔}
这使我们可以自定义用于日历功能的字符串。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
const 日历Strings = {
lastDay : ‘[Yesterday at] LT’,
sameDay : ‘[Today at] LT’,
nextDay : ‘[Tomorrow at] LT’,
lastWeek : ‘[last] dddd [at] LT’,
nextWeek : ‘dddd [at] LT’,
sameElse : ‘L’
};
返回 (
<时刻 日历= {calendarStrings}>
‘1976-04-19T12：59-0500’
</时刻>
);
}
}
20) 语言环境
区域设置= {string}
这将设置用于显示日期的语言环境。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
const 日期ToFormat = ‘1976-04-19T12：59-0500’;
返回 (
<时刻 地区=“de”>{dateToFormat}</时刻>
);
}
}
21) 元件
元素= {string / 反应Component}
确定要呈现为的元素类型（字符串或函数）
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 元件=“span”>1976–04–19T12:59–0500</时刻>
);
}
}
输出：
<跨度>1976年4月19日星期一12:59:00 GMT-0500</跨度>
22) OnChange
onChange = {func}
每次更新日期时都会调用onChange属性，默认情况下是每60秒更新一次。该函数接收新的日期值。
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 onChange= {（val） => { 安慰。日志（val）; }}>
1976–04–19T12:59–0500
</时刻>
);
}
}
其他道具
任何其他属性都将传递给<time> 元件.
进口 反应 从 ‘react’;
进口 时刻 从 ‘react-moment’;
出口 默认 类 我的组件 延伸 反应零件 {
渲染（）{
返回 (
<时刻 班级名称=“datetime” 隐藏的咏叹调= { 真正}>
1976–04–19T12:59–0500
</时刻>
);
}
}
输出： <时间 类=“datetime” 隐藏的咏叹调=“true”>1976年4月19日星期一12:59:00 GMT-0500</时间>
合并计时器
默认情况下，为每个已安装的计时器创建计时器<Moment/>实例以更新日期值。但是，性能可能会受到打击。当您尝试安装许多实例时。通过使用池计时器解决此问题。
进口 反应 从 ‘react’;
进口 反应DOM 从 ‘react-dom’;
进口 时刻 从 ‘react-moment’;
进口 应用程式 从 ‘./components/app’;
// Start the pooled 时间r which runs every 60 seconds
//（默认为60000毫秒）。
时刻.startPooledTimer（）;
//或设置更新间隔。这将更新已安装的
//每30秒实例一次。
// 时刻.startPooledTimer(30000);
反应DOM.渲染(<应用程式 />, 文件.getElementById(‘mount’））;
全局配置
某些prop值可能是全局设置的，因此您不必’不必在每个反应瞬间实例上设置它们。
- 全球时刻
- globalLocale
- globalFormat
- globalParse
- globalFilter
- globalElement
- globalTimezone
- globalLocal
进口 反应 从 ‘react’;
进口 反应DOM 从 ‘react-dom’;
进口 时刻 从 ‘瞬间/分钟/片刻’;
进口 时刻 从 ‘react-moment’;
//设置要使用的矩实例。
时刻.全球时刻 = 时刻;
//将每个react-moment实例的语言环境设置为法语。
时刻.globalLocale = ‘fr’;
//为每个react-moment实例设置输出格式。
时刻.globalFormat = ‘D MMM YYYY’;
// Set the 时间zone for every instance.
时刻.globalTimezone = ‘America/Los_Angeles’;
//为每个实例设置本地的输出时区。
时刻.globalLocal = 真正;
// 用一个<span>标记每个反应时刻实例。
时刻.globalElement = ‘span’;
//大写所有呈现的日期。
时刻.globalFilter = (d) => {
返回 d.至大写（）;
};
const 应用程式 = （） => (
<时刻>1976–04–19T12:59–0500</时刻>
）;
反应DOM.渲染(<应用程式 />, 文件.getElementById(‘mount’））;
您可以使用常规道具逐个实例覆盖全局值。
进口 反应 从 ‘react’;
进口 反应DOM 从 ‘react-dom’;
进口 时刻 从 ‘react-moment’;
//将每个react-moment实例的语言环境设置为法语。
时刻.globalLocale = ‘fr’;
const 应用程式 = （） => (
<div>
{/ *
Renders using the ‘fr’区域设置（由于全局设置）。
*/}
<时刻>1976–04–19T12:59–0500</时刻>
{/ *
覆盖全局语言环境并使用‘en’ instead.
*/}
<时刻 地区=“en”>1976–04–19T12:59–0500</时刻>
</div>
）;
反应DOM.渲染(<应用程式 />, 文件.getElementById(‘mount’））;
在React Native中使用
如果您使用React Native，那么您’ll have 至 pass in 文本.
进口 时刻 从 ‘react-moment’;
进口 { 文本 } 从 ‘react-native’;
然后：
<时刻 元件={文本} >1976-04-19T12：59-0500</时刻>
