1. ホーム
  2. reactjs

[解決済み] Moment.jsとReactJS(ES6)の組み合わせ

2022-03-01 14:21:17

質問

私はMoment.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>
    );
}

解決方法は?

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