使用React js（ES6）的时刻js

Question

我是新来的反应js。我正在为我的新项目使用Reactjs（ES6）。如何使用moment.js格式化日期？

我想在下面提到的循环中格式化我的post.date。

 render() {
    return (
        <div>
            { 
            this.props.data.map((post,key) => 
                <div key={key} className="post-detail">
                    <h1>{post.title}</h1>
                    <p>{post.date}</p>
                    <p dangerouslySetInnerHTML={{__html: post.content}}></p>
                    <hr />
                </div>
            )}
        </div>
    );
}

Answer 1

既然您使用的是webpack，那么您应该只需要import或require，然后使用它：

import moment from 'moment'

...
render() {
    return (
        <div>
            { 
            this.props.data.map((post,key) => 
                <div key={key} className="post-detail">
                    <h1>{post.title}</h1>
                    <p>{moment(post.date).format()}</p>
                    <p dangerouslySetInnerHTML={{__html: post.content}}></p>
                    <hr />
                </div>
            )}
        </div>
    );
}
...

Answer 2

我知道，问题有点老了，但是因为我在这里看起来人们还在寻找解决方案。

我建议你使用react-moment link，

react-moment带有方便的JSXtags，减少了大量的工作。就像你的情况一样： -

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment format="YYYY/MM/DD">{this.props.dateToFormat}</Moment>
    }
}

Answer 3

如果其他答案失败，请将其导入为

import moment from 'moment/moment.js'

可以工作。

Answer 4

我使用它如下，它工作得很好。

import React  from 'react';
import * as moment from 'moment'

exports default class MyComponent extends React.Component {
    render() {
            <div>
              {moment(dateToBeFormate).format('DD/MM/YYYY')}
            </div>            
    }
}

Answer 5

在我的情况下，我想获得几个国家的时区，首先安装时刻js

npm install moment --save  

然后安装moment-timezone.js

npm install moment-timezone --save

然后我像这样在我的组件中导入它们

import moment from 'moment';
import timezone from 'moment-timezone'

然后因为我想分别得到小时和分钟以及第二次我喜欢这样

<Clock minutes={moment().tz('Australia/Sydney').minute()} hour={moment().tz('Australia/Sydney').hours()} second={moment().tz('Australia/Sydney').second()}/>

Answer 6

导入项目的时刻

 import moment from react-moment

然后像这样使用它

return(
<Moment format="YYYY/MM/DD">{post.date}</Moment>
);

Answer 7

 import moment from 'moment';
 .....

  render() {
   return (
    <div>
        { 
        this.props.data.map((post,key) => 
            <div key={key} className="post-detail">
                <h1>{post.title}</h1>
                <p>{moment(post.date).calendar()}</p>
                <p dangerouslySetInnerHTML={{__html: post.content}}></p>
                <hr />
            </div>
        )}
    </div>
   );
  }

Answer 8

我在我的反应项目中使用了一下

import moment from 'moment'

state = {
    startDate: moment()
};
render() {
    const selectedDate = this.state.startDate.format("Do MMMM YYYY");
    return(
     <Fragment>
       {selectedDate)
     </Fragment>
   );
}