2016-06-23 13 views
7

Ich bin neu zu reagieren js. Ich verwende Reactjs (ES6) für mein neues Projekt. Wie kann ich das Format moment.js formatieren?Moment js mit React js (ES6)

Ich möchte meine post.date in der unten genannten Schleife formatieren.

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> 
    ); 
} 
+0

Bündeln Sie mit Webpack oder browserify? –

+0

Wird der Moment über npm in Ihrer App installiert? und wenn ja, müssen Sie nur importieren und verwenden Sie es wie in normalen Javascript – erichardson30

+0

@DavinTryon Ich verwende Webpack –

Antwort

20

Da Sie webpack verwenden, sollten Sie in der Lage sein, nur import oder require Moment und dann verwenden:

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

Einverstanden. Oder wenn Sie nicht möchten, dass der Momentcode innerhalb der JSX liegt, erstellen Sie eine Format-Datumsfunktion, die einfach das neue formatierte Datum zurückgibt und aus der JSX-Datei '

{this.formatDate (post.date)}}

' – erichardson30

9

ich weiß, ist Frage ein bisschen alt, aber da bin hier sieht aus wie Menschen suchen noch nach Lösungen.

Ich werde vorschlagen, dass Sie react-moment verwenden link,

react-moment kommt mit praktischen JSX-Tags, die eine Menge Arbeit zu reduzieren. Wie in Ihrem Fall: -

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> 
    } 
}