【React入門】 Templates中的動態變數

Template簡介

上次提到的Components其實可以分為兩種概念 :
1. Template(模板) : 簡單來說就是界面的樣子，可能會包含版面預構設計、Components之組成、Styling(例如字體、顏色效果、背景樣式或icon等等）、插件、Widgets或Libraries
2. Login : 就是Element的各式功能，或是設定Element要如何跟用戶的互動等等；而這些就會涉及到變數、運算子、函式之類的!

預先準備

開啟src/App.js，將function App()改為以下 :

function App() {
    return (
        <div className="App">
            <div className="content">
                <h1>App Component</h1>
            </div>
        </div>
    );
}

此時npm run start測試目前網頁的樣子，就可以看到以下畫面 :

補充 :

如果在測試網頁中，按F12打開開發人員工具，就可以看到html碼

而如果將其跟我們剛剛輸入的JSX code去做比較 :

可以看的出來，兩者其實相當類似

而目前回傳的這整個結構，只有簡單的介面，尚未有Logic的部分，所以這整體就是我們上面提到的Template!

動態變數宣告 — Type 1

首先，我們在return前先宣告幾個變數 :
1
2
3
const title = 'Welcome to the new blog'; // String
const likes = 50; // int
const link = 'http://www.google.com'; //String
如果好奇const與其他變數宣告的方式，歡迎參閱【從零開始學JavaScript】宣告變數
接著在return的<div className="content">...</div>中，修改成以下這樣 :
1
2
<h1>{ title }</h1>
<p>Liked { likes } times</p>
也就是在JSX中，可以利用 { } 去使用先前建立之變數的值
結果就會變下面這樣 :
不只如此，在Element的屬性中也能使用動態變數 (下面以<a>元素為例)
假設在<div className="content">...</div>中再增加下面這行 :
1
<a href={ link }>Google Site</a>
也就是將link變數的值放進<a>元素的href屬性中
結果就會變下面這樣 :

動態變數宣告 — Type 2

變數還有另一種宣告方式，就是可以直接在JSX的Element中直接宣告，如下 :
1
2
3
<p>{ 10 }</p>
<p>{ "hello, ninjas" }</p>
<p>{ [1,2,3,4,5] }</p>
結果如下 :
另外，也可以直接在Element中進行運算 :
1
<p>{ Math.random() * 10 }</p>
結果如下 :

注意事項

宣告動態變數時要注意一點，就是要在直接在網頁中顯示文字時，要注意變數其型態 :
- 可以顯示的型態包含 :
  1. 數字(Number)
  2. 字串(String)
  3. 陣列(Array)
- 不可顯示的型態包含 :
  1. 布林值(Boolean)
  2. 物件(Object))
範例 :
- 假設先宣告以下變數 :
  1
  const person = { name: 'yoshi', age: 30 };
- 在return的<div className="content">...</div>中，新增以下程式碼 :
  1
  <p>{ person }</p>
- 結果便會出現錯誤訊息
  1
  Error: Objects are not valid as a React child (found: object with keys {name, age}). If you meant to render a collection of children, use an array instead.
- 接著，假設宣告以下變數 :
  1
  2
  const person = { name: 'yoshi', age: 30 };
  const temp = true;
- 一樣在return的<div className="content">...</div>中，新增以下程式碼 :
  1
  <p>{ temp }</p>
- 結果雖然沒有錯誤訊息，但會發現什麼都沒有出現…(不論是true或false都一樣)

總結

這次我們練習了如何在JSX中使用變數，下一次要來練習如何堆疊多個Components~