跳到内容
保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847
65分钟阅读

反应 时刻: How 至 Install it Easily?

  1. 首页
  2. 反应js
  3. 反应 时刻: How 至 Install it Easily?

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}>

                19760419T12:590500

            </时刻>

        );

    }

}

 

此过程将禁用更新。 

 

进口 反应  ‘react’;

进口 时刻 ‘react-moment’;

 

出口 默认 我的组件 延伸 反应零件 {

    渲染(){

        返回 (

            <时刻 间隔= { 0}>

                19760419T12:590500

            </时刻>

        );

    }

}

2)    格式化

格式= {字符串}

 

这有助于根据给定的格式字符串格式化日期。

进口 反应  ‘react’;

进口 时刻 ‘react-moment’;

 

出口 默认 我的组件 延伸 反应零件 {

    渲染(){

        返回 (

            <时刻 格式=“YYYY/MM/DD”>

                19760419T12:590500

            </时刻>

        );

    }

}

 

输出:

<时间>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”>

                19760419 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’;

 

出口 默认 我的组件 延伸 反应零件 {

    渲染(){

        返回 (

            <时刻 现在起>19760419T12:590500</时刻>

        );

    }

}

 

输出:

<时间>40 年份 前</时间>

 

当我们在fromNow中加入之前时,它将在相对时间中省略足够的时间。 

进口 反应  ‘react’;

进口 时刻 ‘react-moment’;

 

出口 默认 我的组件 延伸 反应零件 {

    渲染(){

        返回 (

            <时刻 现在起 >19760419T12:590500</时刻>

        );

    }

}

 

输出: 

<时间>40 年份</时间>

 

6)    从现在开始

现在起During = {数字}

 

设置fromNowDuring将有助于显示相对时间,例如fromNow,但仅在其值(以毫秒为单位)内显示,然后使用该格式。 

 

7)   

发件人= {string}

进口 反应  ‘react’;

进口 时刻 ‘react-moment’;

 

出口 默认 我的组件 延伸 反应零件 {

    渲染(){

        返回 (

            <时刻 =“2015-04-19”>19760419T12:590500</时刻>

        );

    }

}

输出:

<时间>39 年份</时间>

8)    到现在

现在 = {bool}

 

这与fromNow非常相似,但间隔相反。 

进口 反应  ‘react’;

进口 时刻 ‘react-moment’;

 

出口 默认 我的组件 延伸 反应零件 {

    渲染(){

        返回 (

            <时刻 现在>19760419T12:590500</时刻>

        );

    }

}

输出:

<时间>40 年份 前</时间>

 

9)   

到= {string}

 

进口 反应  ‘react’;

进口 时刻 ‘react-moment’;

 

出口 默认 我的组件 延伸 反应零件 {

    渲染(){

        返回 (

            <时刻 =“2015-04-19”>19760419T12:590500</时刻>

        );

    }

}

输出: 

<时间>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>

                19760419T12:590500

            </时刻>

        );

    }

}

输出: 

<时间 标题=“1976-04-19T12:59-0500”>19 Apr 1976</时间>

 

12) 标题格式

标题Format = {字符串}

 

这向我们展示了使用withTitle属性时标题日期的格式。 

 

进口 反应  ‘react’;

进口 时刻 ‘react-moment’;

 

出口 默认 我的组件 延伸 反应零件 {

    渲染(){

        返回 (

            <时刻 标题Format=“D MMM YYYY” withTitle>

                19760419T12:590500

            </时刻>

        );

    }

}

输出: 

<时间 标题=“19 Apr 1976”>1976-04-19T12:59-0500</时间>

 

13) 区别

差异 = {string}

小数= {bool}

单元 = {string}

 

进口 反应  ‘react’;

进口 时刻 ‘react-moment’;

 

出口 默认 我的组件 延伸 反应零件 {

    渲染(){

        返回 (

            <div>

              <时刻 差异=“2015-04-19”>19760419T12:590500</时刻>

              <时刻 差异=“2015-04-19” 单元=“days”>19760419T12:590500</时刻>

              <时刻 差异=“2015-04-19” 单元=“years” 小数>19760419T12:590500</时刻>

            </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’;

 

出口 默认 我的组件 延伸 反应零件 {

    渲染(){

        返回 (

            <时刻 本地>

                20181101T12:590500

            </时刻>

        );

    }

}

 

输出: 

<时间>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”>19760419T12:590500</时刻>

        );

    }

}

输出: 

<跨度>1976年4月19日星期一12:59:00 GMT-0500</跨度>

 

22) OnChange

onChange = {func}

 

每次更新日期时都会调用onChange属性,默认情况下是每60秒更新一次。该函数接收新的日期值。 

 

进口 反应  ‘react’;

进口 时刻 ‘react-moment’;

 

出口 默认 我的组件 延伸 反应零件 {

    渲染(){

        返回 (

            <时刻 onChange= {(val) => { 安慰。日志(val); }}>

                19760419T12:590500

            </时刻>

        );

    }

}

 

其他道具 

任何其他属性都将传递给<time> 元件. 

进口 反应  ‘react’;

进口 时刻 ‘react-moment’;

 

出口 默认 我的组件 延伸 反应零件 {

    渲染(){

        返回 (

            <时刻 班级名称=“datetime” 隐藏的咏叹调= { 真正}>

                19760419T12:590500

            </时刻>

        );

    }

}

输出: <时间 =“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 应用程式 = () => (

    <时刻>19760419T12:590500</时刻>

);

 

反应DOM.渲染(<应用程式 />, 文件.getElementById(‘mount’));

您可以使用常规道具逐个实例覆盖全局值。

进口 反应  ‘react’;

进口 反应DOM ‘react-dom’;

进口 时刻 ‘react-moment’;

 

//将每个react-moment实例的语言环境设置为法语。

时刻.globalLocale = ‘fr’;

 

const 应用程式 = () => (

    <div>

        {/ *

            Renders using the ‘fr’区域设置(由于全局设置)。

        */}

        <时刻>19760419T12:590500</时刻>

 

        {/ *

            覆盖全局语言环境并使用‘en’ instead.

        */}

        <时刻 地区=“en”>19760419T12:590500</时刻>

    </div>

);

 

反应DOM.渲染(<应用程式 />, 文件.getElementById(‘mount’));

在React Native中使用

如果您使用React Native,那么您’ll have 至 pass in 文本.

进口 时刻 ‘react-moment’;

进口 { 文本 } ‘react-native’;

然后:

<时刻 元件={文本} >1976-04-19T12:59-0500</时刻>

 

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog
下一篇文章
反应形式验证:这里’s How 至 Do it

最近的帖子

QuikieApps
张贴者 QuikieApps
2020年11月2日
QuikieApps
张贴者 QuikieApps
2020年11月2日

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。
Cookie政策