在reactjs组件内部格式化日期

我有这样的组件

var Post = React.createClass({


render: function () {
    return (
      

        

          
        
        

          
{ this.props.message.content }
          { "@"+this.props.message.user.login + " • " }
          
            { this.props.message.createdAt }
          
        
      
      )
  }
});

事实证明,这createdAt是一个字符串1451589259845,我想格式化日期.我怎么能在ReactJS上做到这一点？我试过把它new Date()放在括号内但是出错了.

只需在开始返回之前以常规方式在JS中执行此操作,并将模板放在:

render: function() {
  var cts = this.props.message.createdAt,
      cdate = (new Date(cts)).toString();
  return (
    ...
    { cdate }
    ...
  );
}

并且有很多方法可以进行字符串格式化,Date有许多内置(比如toLocaleString或toUTCString),或者你可以使用像moment.js这样的专用格式化程序

你可以运行常规的JavaScript New Date().但是,我强烈建议使用momentjs,因为它似乎更符合你要做的事情.

在命令行上执行:

npm install moment --save

然后在您的代码中var moment = require("moment");或 import moment from "moment";根据您是否使用ES6.

之后,我会像这样运行代码.

var timeAgo = moment(this.props.message.createdAt).fromNow()

{ timeAgo }

此外,安装一个软件包可能看起来很痛苦,但是时刻非常好,我强烈推荐它.我推荐它的原因是人性化时代.例如,fromNow()格式化使其在30秒前,4天前或3个月前说出来.这听起来像是一个人写的,除非另有说明,否则它不会显示大量不必要的信息.我的意思是,大多数人不想知道它是几个小时前的几分钟前.所以,出于这些原因,我推荐了这个库.如果您愿意,可以随意使用香草JS,我只是发现那个时刻对于表现目的非常好,让我避免编写大量的数学函数来显示月份等.

需要这种格式吗？

2018年5月30日星期三`

只需声明

const DATE_OPTIONS = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };

然后在您的React JS代码中

{(new Date()).toLocaleDateString('en-US', DATE_OPTIONS)}

toLocaleDateString（）方法返回一个字符串，该字符串具有此日期的日期部分的语言敏感表示

来源和更多选择