形式の日付は限り内部の部品

Question

をreactjs私はこの

var Post = React.createClass({ 


render: function() { 
    return (
     <li key={ this.props.message.uid }> 
     <div className="avatar"> 
      <img src={ this.props.message.user.avatar } className="img-circle"/> 
     </div> 
     <div className="messages"> 
      <p>{ this.props.message.content }</p> 
      <span className="date">{ "@"+this.props.message.user.login + " • " }</span> 
      <span className="date timeago" title={ this.props.message.createdAt }> 
      { this.props.message.createdAt } 
      </span> 
     </div> 
     </li> 
    ) 
    } 
}); 

のようなコンポーネントはcreatedAtが1451589259845のような文字列であると私は日付をフォーマットすることが判明しています。 ReactJSでどうすればいいですか？私はnew Date()を括弧の中に入れてみましたが、エラーが発生しました。

Answer 1

はちょうどあなたがあなたのリターンを開始する前に、JSで通常の方法でそれを行う、とばかりにそのテンプレート：

render: function() { 
    var cts = this.props.message.createdAt, 
     cdate = (new Date(cts)).toString(); 
    return (
    ... 
    <span ...>{ cdate }</span> 
    ... 
); 
} 

そして、あなたは書式設定文字列を行うことができますかなりの数の方法があり、日付が番号を持っています（ toLocaleStringまたは toUTCStringのような）内蔵のフォーマッタを使用するか、 moment.js

Answer 2

などの専用フォーマッタを使用できます。通常のJavaScriptの新しい日付（）を実行するだけで済みます。しかし、私はあなたがやろうとしているものと一線を画しているように、momentjsの使用を強くお勧めします。コマンドラインで

は行います

npm install moment --save

次に、あなたのコードのいずれかであなたがES6を使用しているか否かに応じて、 var moment = require("moment");または import moment from "moment";。

その後、私はそういうコードを実行します。

var timeAgo = moment(this.props.message.createdAt).fromNow()

<span className="date timeago" title={ timeAgo }> { timeAgo }</span>

また、これを行うためのパッケージをインストールするために巨大な痛みのように見えるかもしれませんが、今は本当にいいです、私は非常にそれをお勧めします。私が勧めた理由は、は人間化回です。たとえば、fromNow（）の書式設定では、30秒前、4日前、3か月前のようになります。それは、それが書かれた人のように聞こえるし、指定されていない限り、たくさんの不必要な情報を表示しません。つまり、ほとんどの人は数分前に何分、何秒前になったのか分かりたくないということです。だから、私はこれらの理由でこのライブラリを勧めました。あなたのことを、仮定して当然のものであることが