JSX 語法介紹

JSX 語法介紹

JSX（JavaScript XML）是 React 引入的一種語法擴展，它讓我們能夠在 JavaScript 代碼中寫類似 HTML 的標記。儘管看起來像 HTML，但 JSX 是 JavaScript 的一部分，最終會被轉換為 JavaScript 代碼來渲染 DOM。

1. JSX 基本語法

JSX 的寫法和 HTML 十分相似，但其中包含了 JavaScript 的能力。它使得在 UI 代碼中嵌入 JavaScript 變得直觀。

範例：

const element = <h1>歡迎來到 React 世界！</h1>;

這段代碼使用 JSX 建立了一個 h1 標籤，並將文字 “歡迎來到 React 世界！” 插入其中。這段 JSX 會被 React 轉換為以下 JavaScript 語法：

const element = React.createElement('h1', null, '歡迎來到 React 世界！');

2. 表達式嵌入

在 JSX 中，你可以使用大括號 {} 來嵌入 JavaScript 表達式。

範例：

const name = '小明';
const element = <h1>你好, {name}!</h1>;

這裡的 {name} 是一個 JavaScript 表達式，它會將變數 name 的值插入到 h1 標籤中。結果會渲染為：

<h1>你好, 小明!</h1>

3. JSX 屬性

JSX 中的屬性與 HTML 相似，但有一些命名上的差異：

• 使用 className 來代替 HTML 中的 class。
• 使用 htmlFor 來代替 HTML 中的 for。

範例：

const element = <div className="container">內容在這裡</div>;

4. JSX 必須有一個根元素

在 JSX 中，所有標記必須被一個單一的父元素包裹。這是因為 React 組件返回的內容必須是單一的元素。

錯誤的例子：

return (
  <h1>標題</h1>
  <p>段落</p>
);

正確的例子：

return (
  <div>
    <h1>標題</h1>
    <p>段落</p>
  </div>
);

如果不想添加多餘的 DOM 標籤，你可以使用 React 的 Fragment 語法來解決：

return (
  <>
    <h1>標題</h1>
    <p>段落</p>
  </>
);

5. JSX 條件渲染

你可以使用 JavaScript 的三元運算符來在 JSX 中實現條件渲染。

範例：

const isLoggedIn = true;
return (
  <div>
    {isLoggedIn ? <h1>歡迎回來!</h1> : <h1>請登錄。</h1>}
  </div>
);

6. JSX 中的樣式

在 JSX 中添加樣式有兩種常見方式：

• 內聯樣式：使用 JavaScript 對象來定義樣式。
• 外部樣式表：和 HTML 一樣使用 className 來引用外部 CSS。

範例（內聯樣式）：

const divStyle = {
  color: 'blue',
  fontSize: '20px'
};
const element = <div style={divStyle}>這是有內聯樣式的文字</div>;

7. JSX 是防止注入攻擊的

React 自動對嵌入在 JSX 中的所有變數進行編碼處理，從而防止 XSS（跨站腳本攻擊）。即使你嵌入用戶輸入的數據，React 也會確保它是安全的。

範例：

const userInput = '<script>alert("hacked!")</script>';
const element = <div>{userInput}</div>;  // React 會自動將這段代碼轉換為純文本

8. 自閉合標籤

在 JSX 中，像 img、input 等沒有子元素的標籤需要用自閉合標記。

範例：

const element = <img src="image.png" alt="圖片" />;

總結

JSX 是 React 的核心語法，它讓 UI 代碼更具可讀性和維護性。通過在 JSX 中使用 JavaScript 表達式，你可以輕鬆構建動態且可交互的界面。JSX 本質上是 JavaScript 的擴展，它會被轉譯為純 JavaScript，因此它具備所有 JavaScript 的靈活性和強大功能。