format de date à l'intérieur de reactjs composant
J'ai un composant comme ce
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>
)
}
});
s'avère que le createdAt
est une chaîne de caractères comme 1451589259845
et je veux le format de la date. Comment puis-je le faire sur ReactJS? J'ai essayé de mettre new Date()
entre parenthèses, mais a eu une erreur.
OriginalL'auteur Luiz E. | 2015-12-31
Vous devez vous connecter pour publier un commentaire.
Juste le faire en JS de la manière habituelle, avant de commencer votre retour, et seulement modèle:
Et il y a assez peu de moyens, vous pouvez faire la mise en forme de chaîne, la Date a un certain nombre d'entre eux ont construit (comme
toLocaleString
outoUTCString
), ou si vous utilisez un module de formatage comme moment.jsOriginalL'auteur Mike 'Pomax' Kamermans
Vous pouvez simplement fonctionner le JavaScript New Date(). Cependant, je tiens à vous recommandons vivement d'utiliser momentjs, comme cela semble être plus en ligne avec ce que vous essayez de faire.
Sur la ligne de commande n':
npm install moment --save
Puis dans votre code soit
var moment = require("moment");
ouimport moment from "moment";
selon que vous utilisez ES6 ou pas.Après, j'aurais exécuter du code comme si.
var timeAgo = moment(this.props.message.createdAt).fromNow()
<span className="date timeago" title={ timeAgo }>
{ timeAgo }</span>
Aussi, il peut sembler comme une immense douleur pour installer un package pour ce faire, mais le moment est vraiment très agréable et je le recommande fortement. La raison que j'ai recommandé, c'est qu'il humanise fois. Comme par exemple, la fromNow() mise en forme rend-il dire 30 secondes plus tôt, il ya 4 jours, ou il y a 3 mois. Il le fait ressembler à une personne qui l'a écrit et il n'affiche pas des tonnes d'info inutile, sauf indication contraire. Je veux dire, la plupart des gens ne veulent pas savoir combien de minutes et de secondes, c'était si c'était il y a plusieurs heures. Donc, j'ai recommandé cette bibliothèque pour ces raisons. N'hésitez pas à utiliser de la vanille en JS mais si vous préférez, je trouve juste que le moment est très agréable pour des raisons de présentation et laissez-moi d'éviter d'avoir à écrire des tonnes de fonctions mathématiques pour l'affichage mois, etc.
OriginalL'auteur Tim Gass
Voulez ce format?
Il suffit de déclarer
Et puis dans votre Réagissent code JS
OriginalL'auteur Michael