元件的 Props

在 React 中，props（屬性）是實現 元件之間資料傳遞 的主要機制，特別是在 父元件和子元件 之間。

你可以將 props 想像成父元件和子元件之間的溝通橋樑，讓我們以 Pizza 元件為例：

// Pizza 元件
function Pizza() {
  return (
    <div>
	  <img src="pizzas/spinaci.jpg" alt="Pizza spinaci" />
	  <h3>Pizza Spinaci</h3>
	  <p>Tomato, mozarella, spinach, and ricotta cheese</p>
	</div>
  )
}

現在，我們嘗試將 props 傳遞給 Pizza 元件，props 的屬性和值如下：

// 因為在 App 元件裡面使用 Pizza 元件，所以 App 是 Pizza 的父元件
function App() {
  return (
    // 將 props 傳遞到 Pizza 元件內（父傳子）
    <Pizza
	  name="Pizza Spinaci"
	  ingredient="Tomato, mozarella, spinach, and ricotta cheese"
	  photoName="pizzas/spinaci.jpg"
	/>
  )
}

在 Pizza 元件裡，可以使用 props 參數來接收這些傳遞下來的屬性：

function Pizza(props) {
  console.log(props)            // { name: ..., ingredient: ..., photoName: ... }
  console.log(props.name)       // Pizza Spinaci
  console.log(props.ingredient) // Tomato, mozarella, spinach, and ricotta cheese
  console.log(props.photoName)  // pizzas/spinaci.jpg

  return (
    <div>
	  <img src="pizzas/spinaci.jpg" alt="Pizza spinaci" />
	  <h3>Pizza Spinaci</h3>
	  <p>Tomato, mozarella, spinach, and ricotta cheese</p>
	</div>
  )
}

要在 JSX 中插入 props 的值，需要使用大括號 {} 進入 JavaScript 模式，然後將值插入到對應的屬性中：

function Pizza(props) {
  return (
    <div>
	  <img src={props.photoName} alt={props.name} />
	  <h3>{props.name}</h3>
	  <p>{props.ingredient}</p>
	</div>
  )
}

由於 props 參數是一個物件，我們可以使用解構的方式簡化程式碼：

function Pizza({ name, ingredient, photoName }) {
  return (
    <div>
	  <img src={photoName} alt={name} />
	  <h3>{name}</h3>
	  <p>{ingredient}</p>
	</div>
  )
}

完整的程式碼如下：

// App 元件（父元件）
function App() {
  return (
    <Pizza
	  name="Pizza Spinaci"
	  ingredient="Tomato, mozarella, spinach, and ricotta cheese"
	  photoName="pizzas/spinaci.jpg"
	/>
  )
}

// Pizza 元件（子元件）
function Pizza({ name, ingredient, photoName }) {
  return (
    <div>
	  <img src={photoName} alt={name} />
	  <h3>{name}</h3>
	  <p>{ingredient}</p>
	</div>
  )
}

Props 是唯讀的（Read-Only）

一旦將 props 傳遞給子元件，子元件就不能修改這些 props 的值，這種設計方式有助於確保資料的一致性和可控性，。

// Pizza 元件（子元件）
function Pizza({ name, ingredient, photoName }) {
  return (
    <div>
	  <img src={photoName} alt={name} />
	  <h3>{name}</h3>
	  <p>{ingredient}</p>
      
      // 無法修改 props 的值
      <button onClick={() => name = "Apple Pie"}>Change</button>
	</div>
  )
}

單向資料流（One-Way Data Flow）

React 中的資料流動是單向的，資料從父元件傳遞到子元件，但不能反向傳遞，這有助於保持應用程序的可預測性和可維護性。

// 父元件傳遞 props
function App() {
  return (
    <Pizza
	  name="Pizza Spinaci"
	  ingredient="Tomato, mozarella, spinach, and ricotta cheese"
	  photoName="pizzas/spinaci.jpg"
	/>
  )
}

// 子元件接收 props
function Pizza({ name, ingredient, photoName }) {
  return (
    <div>
	  <img src={photoName} alt={name} />
	  <h3>{name}</h3>
	  <p>{ingredient}</p>
	</div>
  )
}

結語

Props 是父元件和子元件之間的溝通橋樑，要特別注意 props 具有以下規則：

1. Props 是唯讀的，不能被子元件所修改。
2. Props 遵循著單向資料流（父元件傳遞到子元件）。

這些規則確保應用程序的資料流動具有清晰的單向性。