iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
2
Modern Web

Zero to hero with React.js系列 第 5

【Day5 React】render 一個會動的 React 日曆

日曆 DEMO

時間誠可貴,參加鐵人賽方得時間更加珍貴

我們可以直接把要呈現在 DOM 的內容直接寫在 ReactDOM.render() ,不過通常我們會在這個 function 外先做好所有 JavaScript 的邏輯,例如運算或從 API 取出資料等等,我們會先在外面處理完,再將要輸出的結果放到 ReactDOM.render() 裡。

一開始的寫法是將要 render 的內容放在 ReactDOM.render()

<script type="text/babel">
    ReactDOM.render(
      <h1>Hello World!!!</h1>,
      document.getElementById('root')
    );
</script>

而將要渲染的內容移至 ReactDOM.render() 外,則程式碼會這樣寫

<script type="text/babel">

    const element = (           //將要渲染的內容放在變數裡
      <div>
         <h1>It is TIME!</h1>
         <h2>It is {new Date().toLocaleTimeString()}.</h2>
      </div>
    

    )

    function tick(){
      ReactDOM.render(
        element,               //呼叫存有渲染內容的變數
        document.getElementById('root')
      );
    }

    tick();

</script>

記得這邊的 HTML 語法事實上是 JavaScript 語法,當你有兩個以上的元素,就必須把他們包在 <div></div> 否則 Babel 看不懂這個語法,無法轉譯導致出現 Inline Bable Script 的錯誤訊息。
為了使用 Javascript 來取得屬性的值,JSX 使用 {...} 來取值,所以把 new Date().toLocaleTimeString() 放到 {} 中,就可以順利在頁面上顯示時間。

以上是不會自動更新的時間,再手動 reload 頁面後才會看到新的時間。那麼,我們如何在不手動操作的情況下,讓頁面上的時間就像是一般的電子鐘一秒一秒更新?

我們只需要將

tick();

轉換成

 setInterval(tick, 1000);
 

設定我們要在每 1000 毫秒重跑一次 tick() 這個 function,如此一來 React 就會再次更新 DOM。一千毫秒也就是我們熟知的一秒鐘,因此就可以做出像時鐘一樣,秒數每秒更新的樣式了!


在會 render 出時間之後,我突然靈機一動,因此就做出這個有時間的日曆了,透過 JavaScript 的 Date().getDate() 可以抓取當天的日期;Date().getFullYear() 可以抓取「西元年」;Date().getMonth() 則可以抓到月份,不過比較特別的是,月份是從 0 作為起始點,所以這個月會顯示 「11」,我們只要手動在後面 +1 就可以順利取得當下的月份。

const element = (
  <div>
     <h1>Cherish EVERY MOMENT!</h1>
     <div id="calendar">
       <h3 id="date">{new Date().getDate()}</h3>
       <h2 id="day">{new Date().getFullYear()} / {new Date().getMonth()+1}</h2>
       <h2 id="time_now">{new Date().toLocaleTimeString().split("下午")}</h2>
       </div>
  </div>
)

上一篇
【Day4 React】終於跟 World 說 Hello World!
下一篇
【Day6 React】學習都是從觀摩他人的 code 開始
系列文
Zero to hero with React.js30

1 則留言

0
Luis-Chen
iT邦新手 4 級 ‧ 2017-12-12 00:30:05

妳好,在下初學React,有緣遇到一樣學React的大大,特地前來拜讀文章,還請大大多多指教

嗨~~~你好!!
我學東西超慢的XDD
請多多指教!發現有錯也歡迎鞭大力~
我們一起加油(但我要先睡覺哈哈哈)

我要留言

立即登入留言