經過上一回的 JSX 超入門,這一次一樣入門,不過從變數以及表達式開始。
變數怎麼使用?
先定義一個變數出來,例如 const word = 'PS5'
,接著在 ReactDOM
的第一個參數中使用,只要在變數名稱的外面包上一個大括號就可以使用了,例如:
表達式使用
而在大括號中,除了可以放入變數以外,也可以放入表達式(關於表達式與陳述式這個話題,以後會專門開一個文章來說明)。
const num = 100;
ReactDOM.render(
<p>PS5 今天賣 {num * 100} 台了</p>,
document.querySelector("#root")
); // 在畫面上就會呈現 PS5 今天賣 10000 台了
JSX 的變數大致上就是這樣使用了,使用起來跟 Vue 的感覺有點像,雖然目前還不太習慣,總之就繼續練習下去吧!