【React 學習筆記 EP.04】Props 屬性

什麼是 Props？

屬性 (Props) 是 React 元件之間傳遞資料的機制，由父元件傳給子元件，具有唯讀性。它是實現組件化開發的核心，確保介面能根據外部傳入的參數動態渲染不同內容。

Props 基礎語法

1. 單向資料流：資料只能由上而下傳遞，子元件不可直接修改接收到的 Props
2. 解構賦值：在元件參數中使用 { propName } 直接提取資料，提高程式碼可讀性
3. 預設值：可在解構時賦予初值，確保父元件未傳資料時程式不會崩潰
4. 型別傳遞：Props 可傳遞字串、數字、物件、陣列，甚至是回呼函式
5. 組合 (Children)：特殊的 props.children 可讓元件包含巢狀內容

常見錯誤與解決方法

1. 嘗試修改 Props：在子元件內直接重新賦值給 Props 變數，建議改用 State 或由父元件傳遞變更函式。
2. 解構未定義物件：若父元件未傳送物件卻進行解構導致錯誤，建議設定預設參數 { data = {} }。
3. 傳遞數字當成字串：在 JSX 中傳遞數字卻未使用大括號（如 age="25"），建議改用 age={25} 以保持型別正確。

import './App.css'

// 定義子元件
// 使用解構賦值取得 props 並設定 isAdmin 的預設值為 false
const UserCard = ({ name, age, isAdmin = false }) => {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}> {/* 設定基礎容器樣式 */}
      <h3>姓名：{name}</h3> {/* 渲染從父元件傳來的字串 */}
      <p>年齡：{age}</p> {/* 渲染從父元件傳來的數字 */}
      {isAdmin && <mark>管理員權限</mark>} {/* 條件渲染：若為管理員則顯示標籤 */}
    </div>
  );
};

// 定義父元件
const App = () => {
  return (
    <div>
      <h1>團隊成員名單</h1> {/* 渲染頁面標題 */}
      
      {/* 傳遞字串與數字給子元件 */}
      <UserCard name="王小明" age={25} />
      
      {/* 傳遞所有屬性，包含布林值 */}
      <UserCard name="李大華" age={30} isAdmin={true} />
    </div>
  );
};

export default App; // 匯出元件供外部使用