[解決済み] 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>
);
}
...
関連
-
[解決済み] ReactJS giving error Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み] SVGサークル内の画像にボーダーを追加する方法
-
[解決済み] React JSXのforEach()でHTMLが出力されない
-
[解決済み] Moment.jsで日付オブジェクトに変換する
-
[解決済み] ReactJSでコンポーネントがtext型の非制御入力を制御エラーに変更する場合
-
[解決済み] Reactでes6クラスを使うときの「super()」と「super(props)」の違いとは?
-
[解決済み] Moment.jsで日付の書式を設定する
-
[解決済み】ReactJS - "setState "が呼ばれるたびにrenderが呼び出されるのですか?
-
[解決済み] [Solved] Moment.jsで日付から時間を削除するにはどうすればよいですか?
-
[解決済み】moment.jsで文字列を日付にパースする。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] React.createElement: type is invalid -- expected a string.
-
[解決済み] error 'document' is not defined : eslint / React
-
[解決済み] useStateプロパティのフックにmap関数を使用する方法
-
[解決済み] リアクトです。<tr>は<td>の子として表示できません。コメント > td > tr を参照してください。
-
[解決済み] react router dom v4でwebpack dev serverを構成する方法は?
-
[解決済み] React JS Jestで「SyntaxError: 予期しないトークン"
-
[解決済み] ReactJS - SCRIPT1010: 期待される識別子 - IE11 で本番ビルドが実行されない
-
[解決済み] は、gatsby-imageで動作する良いreactのカルーセルコンポーネントはありますか?[って聞かれます。]
-
[解決済み] react-navigation v5を使ったreact-nativeアプリのAppNavigatorの構文を更新する。
-
[解決済み] AxiosにCORSの問題が発生