時間誠可貴,參加鐵人賽方得時間更加珍貴
我們可以直接把要呈現在 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>
)
妳好,在下初學React,有緣遇到一樣學React的大大,特地前來拜讀文章,還請大大多多指教
嗨~~~你好!!
我學東西超慢的XDD
請多多指教!發現有錯也歡迎鞭大力~
我們一起加油(但我要先睡覺哈哈哈)