前言
React 是一個用於建立 UI 組件的 JavaScript 函式庫,而 JSX 則是 React 中的重要語法擴充。前一章我們已學會如何使用 JSX 編寫 React 介面,本文將進一步說明 React 元件(Components)、props 與事件(Events)的基本觀念與應用,並介紹如何透過函式元件建立互動性的使用者介面,進而引入條件渲染的方式,讓介面能根據資料狀態動態改變內容。
重點摘要
- React 元件就像函式,會回傳 HTML 元素
- 元件是可獨立、可重複使用的程式區塊
- 元件名稱需以大寫開頭
- props 是元件接收的參數,用來傳遞資料
- props 是唯讀的,不能在元件內部直接修改
- 事件處理使用 camelCase 並以大括號包覆事件處理函式
- 可使用箭頭函式傳遞參數至事件處理器
- 可透過 if、三元運算子、邏輯運算子
&&
實現條件渲染
React 條件渲染
React 提供多種條件渲染的方式,以下為三種常見範例:
function MadeGoal() { return <h1>Goal!</h1>; }
function MissedGoal() { return <h1>MISSED!</h1>; }
function Goal(props) { const isGoal = props.isGoal; if (isGoal) { return <MadeGoal />; } return <MissedGoal />; }
const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Goal isGoal={true} />);
|
function Garage(props) { const cars = props.cars; return ( <> <h1>Garage</h1> {cars.length > 0 && <h2>You have {cars.length} cars in your garage.</h2>} </> ); }
const cars = ['Ford', 'BMW', 'Audi']; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Garage cars={cars} />);
|
function Goal(props) { const isGoal = props.isGoal; return <>{isGoal ? <MadeGoal /> : <MissedGoal />}</>; }
const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Goal isGoal={false} />);
|
總結
React 元件是建構 UI 的基本單位,透過 props 傳遞資料與事件處理建立互動,並透過條件渲染控制顯示邏輯。這些基礎觀念為日後深入學習狀態管理、Hooks 與表單處理等主題奠定堅實基礎。
參考文件
- React Custom Hooks
Comments