摘要

JSX 是一種 JavaScript 的語法擴展，它允許我們在 JavaScript 檔案中編寫類似 HTML 的語法。在 Vue 中，JSX 可以作為渲染函數的一種更具宣告性、更友好的替代寫法。

定義與說明

使用 JSX 需要在建置工具（如 Vite）中進行額外配置。配置完成後，你就可以在 .jsx 或 .tsx 檔案中，以接近模板的語法來編寫元件，它在底層會被編譯成等效的 h() 函數呼叫。

實作範例

Vue SFC

// 使用 JSX 重寫 Day 63 的範例。
// HeadingComponent.jsx
export default {
  props: ['level'],
  setup(props, { slots }) {
    const Tag = `h${props.level}`;
    
    // 回傳一個函式，該函式回傳 JSX
    return () => <Tag>{slots.default()}</Tag>;
  }
}

結論

對於習慣 h() 函數的靈活性，但又偏好 HTML 語法的開發者（特別是有 React 背景的），JSX 提供了一個兩全其美的選擇。

JSX TSX 語法擴展