Ich habe eine Komponente wie diese
%Vor% stellt fest, dass die createdAt eine Zeichenkette wie 1451589259845 ist und ich das Datum formatieren möchte. Wie kann ich das auf ReactJS tun? Ich habe versucht, new Date() innerhalb der Klammern setzen, aber einen Fehler bekommen.
Mach es einfach in JS wie gewohnt, bevor du mit deiner Rückkehr beginnst, und tu das einfach in:
%Vor% Und es gibt einige Möglichkeiten, wie Sie die Formatierung von Strings durchführen können, Datum hat eine Reihe von ihnen eingebaut (wie toLocaleString oder toUTCString ), oder Sie können einen dedizierten Formatierer wie moment.js
Sie könnten einfach das normale JavaScript New Date () ausführen. Ich würde jedoch dringend empfehlen, momentjs zu verwenden, da es mehr mit dem übereinstimmt, was Sie versuchen zu tun.
In der Befehlszeile:
npm install moment --save
Dann in deinem Code entweder var moment = require("moment"); oder
import moment from "moment"; , abhängig davon, ob Sie ES6 verwenden oder nicht.
Danach würde ich Code wie folgt ausführen.
var timeAgo = moment(this.props.message.createdAt).fromNow()
<span className="date timeago" title={ timeAgo }>
{ timeAgo }</span>
Es mag auch wie ein großer Schmerz erscheinen, ein Paket dafür zu installieren, aber der Moment ist wirklich nett und ich würde es sehr empfehlen. Der Grund, warum ich es empfahl, ist, dass es mal "humanisiert". Wie zum Beispiel die Formatierung von fromNow () sagt es vor 30 Sekunden, vor 4 Tagen oder vor 3 Monaten. Es klingt wie eine Person, die es geschrieben hat, und es zeigt nicht Tonnen von unnötigen Informationen, wenn nicht anders angegeben. Ich meine, die meisten Leute wollen nicht wissen, wie viele Minuten und Sekunden es war, wenn es mehrere Stunden her war. Also empfahl ich diese Bibliothek aus diesen Gründen. Fühlen Sie sich frei, Vanille JS zu verwenden, wenn Sie bevorzugen, finde ich gerade, dass dieser Moment für Präsentationszwecke sehr nett ist und ich mich vermeiden lasse, Tonnen von mathematischen Funktionen zu schreiben, um Monate usw. anzuzeigen.
Tags und Links javascript reactjs