2015-12-31 51 views
7

Buformat tarih sürece içeride reactjs bileşen

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

gibi bir bileşen createdAt1451589259845 gibi bir dize olduğu ortaya çıktı var ve tarih biçimlendirmek istediğiniz. Bunu ReactJS'de nasıl yapabilirim? Ben parantez içine new Date() koymak ancak bir hata aldım çalıştı.

cevap

10

size geri dönüş başlamadan önce o, JS zamanki gibi yapmak ve sadece bu şablona: Eğer dize biçimlendirme yapabilirsiniz epeyce yol vardır

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

Ve, Tarih bir numarası vardır onları (toLocaleString veya toUTCString gibi) yerleşik veya moment.js

9

gibi özel bir biçimlendirici kullanabilirsiniz arasında sadece düzenli JavaScript Yeni Tarihi çalıştırabilir(). o yapmaya çalıştığını ne doğrultusunda daha fazla gibi görünüyor Ancak, şiddetle, momentjs kullanarak öneriyoruz. Komut satırında

yapın:

npm install moment --save

Sonra kodunda ya sen ES6 kullanmadığınız veya olmamasına bağlı olarak var moment = require("moment"); veya import moment from "moment";.

Ondan sonra, şöyle bir kod çalıştırmak olacaktır.

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

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

Ayrıca, bunu yapmak için bir paket yüklemek için büyük bir ağrı gibi görünebilir, ama an gerçekten güzel ve kesinlikle tavsiye ederim. Ben tavsiye nedeni kez humanizes olmasıdır. Örneğin gibi, fromNow() biçimlendirme 30 saniye önce, 4 gün önce, ya da 3 ay önce söyleten. Bir kişinin yazdığı gibi ses çıkarır ve belirtilmemişse gereksiz bilgi tonu göstermez. Demek istediğim, çoğu insan birkaç saat önce kaç dakika önce olduğunu bilmek istemiyor. Bu nedenle bu kütüphaneyi bu nedenlerle tavsiye ettim. Vb varsayarak elbette

+1

İsterseniz, sadece o an ortaya konması için çok güzel bulup izin gerçi ay görüntülemek için matematik fonksiyonlar ton yazmak için beni zorunda kalmamak var vanilya JS kullanmak için çekinmeyin sen misin Ne kadar süre önce yaratıldığını listelemek istedim, ama bana öyle geliyordu ki, bu sizin denediğiniz şeydi. –