web-dev-qa-db-ja.com

モーメントjsとReact js（ES6）

私は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>
    );
}
reactjsmomentjs
31
Jahanzaib Aslam

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>
    );
}
...
57
Davin Tryon

質問は少し古いですが、ここにいるので、人々はまだ解決策を探しているようです。

react-momentlink を使用することをお勧めします。

react-momentには、多くの作業を削減する便利なJSXタグが付属しています。あなたの場合のように：-

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>
    }
}
12
Dave Ranjan

他の回答が失敗した場合、次のようにインポートします

import moment from 'moment/moment.js'

動作する可能性があります。

3
meesvandongen

私は次のように使用していますが、完全に機能しています

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>            
    }
}
3
Anup Bangale

npm i moment react-moment --saveを実行します

コンポーネントでこれを使用できます。

import Moment from 'react-moment';

const date = new Date();
<Moment format='MMMM Do YYYY, h:mm:ss a'>{date}</Moment>

次のようになります：
enter image description here

1
Alex Yao

瞬間をプロジェクトにインポートする

 import moment from react-moment

その後、このように使用します

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

私の場合、私はいくつかの国のtimeZoneを取得したい、最初のインストールの瞬間js

npm install moment --save

次に、moment-timezone.jsをインストールします

npm install moment-timezone --save

次に、このようにコンポーネントにthemnをインポートします

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()}/>
0
ghazaleh javaheri
 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>
   );
  }
0
Rashmi Singh