2015-12-31 12 views
7

मैं इसप्रारूप तिथि जब तक अंदर 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> 
    ) 
    } 
}); 

की तरह एक घटक पता चला है कि createdAt1451589259845 तरह की स्ट्रिंग होती है और मैं तारीख स्वरूपित करना चाहते हैं। मैं ReactJS पर ऐसा कैसे कर सकता हूं? मैंने ब्रैकेट के अंदर new Date() डालने की कोशिश की लेकिन मुझे एक त्रुटि मिली।

उत्तर

10

बस हमेशा की तरह जे एस में यह करते हैं, इससे पहले कि आप अपनी वापसी शुरू, और बस में उस टेम्पलेट:

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

और वहाँ काफी कुछ तरीके आप स्ट्रिंग स्वरूपण कर सकते हैं, दिनांक एक संख्या है उनमें से निर्मित (जैसे toLocaleString या toUTCString), या आप moment.js

9

पर एक समर्पित फ़ॉर्मेटर का उपयोग कर सकते हैं आप नियमित जावास्क्रिप्ट नई दिनांक() चला सकते हैं। हालांकि, मैं दृढ़ता से क्षणों का उपयोग करने की अनुशंसा करता हूं, क्योंकि ऐसा लगता है कि आप जो करने की कोशिश कर रहे हैं उसके अनुरूप है।

कमांड लाइन पर कार्य करें:

npm install moment --save

फिर अपने कोड में या तो var moment = require("moment"); या import moment from "moment"; आप ES6 का उपयोग कर रहे हैं या नहीं पर निर्भर करता है।

उसके बाद, मैं कोड चलाऊंगा।

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

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

इसके अलावा, यह यह करने के लिए एक पैकेज स्थापित करने के लिए एक बहुत बड़ा दर्द की तरह लग सकता है, लेकिन इस समय वास्तव में अच्छा है और मैं अत्यधिक यह सलाह देते हैं। कारण मैंने इसकी सिफारिश की है कि यह मानवता को मानता है। उदाहरण के लिए, अब से() स्वरूपण इसे 30 सेकंड पहले, 4 दिन पहले, या 3 महीने पहले कहता है। यह एक व्यक्ति की तरह यह ध्वनि बनाता है और यह निर्दिष्ट किए बिना अनावश्यक जानकारी प्रदर्शित नहीं करता है। मेरा मतलब है, ज्यादातर लोग यह जानना नहीं चाहते कि कितने मिनट और सेकंड पहले यह कई घंटे पहले था। इसलिए, मैंने उन कारणों से इस पुस्तकालय की सिफारिश की। यदि आप चाहें तो वेनिला जेएस का उपयोग करने के लिए स्वतंत्र महसूस करें, मुझे लगता है कि यह क्षण प्रस्तुतिकरण उद्देश्यों के लिए बहुत अच्छा है और मुझे महीनों को प्रदर्शित करने के लिए गणित कार्यों को लिखने से बचने दें।

+1

यह निश्चित रूप से माना जाता है कि आप यह जानना चाहता था कि यह कितनी देर पहले बनाया गया था, लेकिन मुझे ऐसा लगा कि आप यही प्रयास कर रहे थे। –