React 學習日誌 No.9

React 公式文件學習筆記：將 props 傳遞給元件

1. Props 的基本

Props (屬性) 是 從父元件向子元件傳遞資訊（資料） 的機制
與 HTML 屬性相似，但 可以傳遞任何 JavaScript 的值，如物件、陣列、函數 等
Props 是 唯一的參數（物件），被傳遞到元件的函數中

2. Props 的傳遞方式與接收方式

傳遞方式 (父元件側)

作為子元件的屬性進行描述

export default function Profile() {
  return (
    <Avatar
       person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }} // 物件
       size={100} // 數值
    />
  );
}

接收方式 (子元件側)

一般使用 解構賦值 (Destructuring) 在函數元件的參數中接收

// 透過解構賦值接收
function Avatar({ person, size }) {
  // person, size 作為變數使用
}

// 不使用解構賦值的情況（同義）
function Avatar(props) {
  let person = props.person;
  let size = props.size;
}

3. 應用

預設值的設定

在解構賦值時，可以使用 = 指定預設值

function Avatar({ person, size = 100 }) {
  // 當 size 未被傳遞或為 undefined 時，使用 100
}

JSX 擴展語法進行 Props 的轉送

父元件可以不逐一描述地將收到的 props 一次性傳遞給子元件

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} /> // 將所有 props 傳遞給 Avatar
    </div>
  );
}

`children` Prop

在元件的起始標籤和結束標籤之間嵌套的 JSX（內容）被作為特別的 children prop 傳遞給父元件
可以用於包裝或佈局元件

// Profile側
<Card>
  <Avatar /> // ← 這整個 <Avatar /> 都是 children
</Card>

// Card側
function Card({ children }) {
  return (
    <div className="card">
      {children} // 放置接收到的內容
    </div>
  );
}