『Day 4』在JSX中使用JavaScript

前言

在上一篇的最後我們有提到，JSX 讓我們能用更直覺的方式撰寫 React 元件，同時又保有 JavaScript 的所有能力。這個特性正是 JSX 最吸引人的地方 - 它不只讓我們能用類似 HTML 的語法來撰寫畫面，更重要的是能夠無縫地與 JavaScript 結合，讓我們在開發時能充分運用 JavaScript 的各種特性和表達能力。

接下來就讓我們一起來看看，如何在 JSX 中靈活運用 JavaScript，讓我們的元件更加動態且強大。

花括號的使用規則

在 JSX 中使用花括號 {} 是連接 JavaScript 和 JSX 的關鍵。但要注意，花括號只能在特定的地方使用：

作為文字：直接在 JSX 標籤內部
作為屬性：緊跟在 = 符號之後

在 JSX 中，若要使用 JavaScript 表達式，一定要用花括號 {}，不能用引號 ""。因為用引號的話，React 會把內容當作純文字處理。

基本使用範例

JSX 最基本的用法是像 HTML 一樣直接使用字串：

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

然而，在實際開發中，我們經常需要使用變數來存儲和管理這些值，特別是像 src 這樣可能需要經常更改的屬性。這不僅提高了代碼的靈活性，也使得後續的維護和更新更加方便。

為了在 JSX 中使用變數或任何 JavaScript 表達式，我們需要使用花括號 {} 而不是引號 "":

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

在 JSX 中嵌入動態內容

我們不只可以在屬性中使用花括號，也能在標籤內容中使用：

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

使用物件和資料結構

JSX 也支援傳遞完整的物件，這就是所謂的「雙花括號」語法。雖然常見於 inline CSS styles，但我個人更推薦用於組織複雜的資料結構：

const person = {
  name: 'Gregorio Y. Zara',
  theme: { backgroundColor: 'black', color: 'pink' },
  todos: ['改進電話', '準備航空學講座', '研究酒精燃料引擎']
};

function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}的待辦事項</h1>
      <ul>
        {person.todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

當使用 map 來渲染列表時，React 需要一個唯一的 key 來追蹤每個項目。

這種方法的優點：

資料集中管理，易於維護
元件間容易重複使用
支援動態渲染，提高靈活度

總結

在 React 開發中，JSX 和 JavaScript 的結合為我們帶來了強大的開發彈性。透過花括號（{}），我們不只能在元件中使用簡單的變數，更可以運用各種 JavaScript 的特性，像是：

在標籤內容和屬性中動態插入資料
使用物件來組織和管理相關的資料
運用 JavaScript 的 array methods（如 map）來動態產生元素
傳遞複雜的資料結構，讓元件更容易重用

掌握好這些技巧，能讓我們的 React 元件不只更容易維護，也更能應對各種開發需求。特別是在處理動態內容時，合理地運用 JavaScript 和 JSX 的組合，往往能讓我們用更簡潔的程式碼達成目標。