今天進入props的學習，會討論以下的議題：

• 什麼是props
• 如何使用props
• 將JSX作為props傳遞

什麼是props

在 React 中，props 是一個特殊的屬性，它允許我們將數據和配置從一個組件傳遞到另一個元件。就像在機械系統中，透過旋鈕可以調整不同部件的運動，props 讓我們能夠調整元件的內容和行為。

實際讓我們看看底下的例子吧。

如何使用props

基本步驟

1. 定義元件： 首先，需要創建一個 React元件。

   譬如我們可以先創建一個打招呼的元件：

   // Greetings.js file
   
   import React from 'react';
   
   function Greetings(props) {
     return (
       <div>
         <h1>Hello, {props.name}!</h1>
         <p>{props.message}</p>
       </div>
     );
   }
   
   export default Greetings;
   

   我們可以看到這裡有一組 props 存在，由於 Greetings 元件使用了兩個屬性 name 和 message，因此對應到兩組 props 的資料。

2. 傳遞 Props： 在組件的開始標籤和結束標籤之間，使用props來傳遞資料給該組件。

   首先，我們在App.js檔案中我們將Greetings 元件引入

   // App.js file
   import React from 'react';
   import Greetings from './Greetings';
   
   function App() {
     return (
       <div>
         <Greetings name="豆芽" message="今天寫鐵人賽文章了嗎？" />
         <Greetings name="菸酒生" message="您論文進度如何呢？" />
       </div>
     );
   }
   
   export default App;
   

   透過Props，我們在使用相同元件的情況下給不同的人提供不同的客製化（動態）訊息。

   

如同上面的例子所示，我們可以理解Props 就像是傳遞給函式的參數一樣。

解構賦值的語法

使用props還有另一項一定要會的寫法，我們使用剛剛的例子來演示：

使用解構賦值的語法：

function Greetings({ name, message }) {
// ...
}

注意：使用時不要忘記在小括號（）內部的大括號{ }哦。

這樣的寫法做了什麼事情呢？

function Greetings(props) {
  let name = props.name;
  let message = props.message;
  // ...
}

它等同於從函式參數中讀取屬性。

再複習一下，第一種寫法使用了解構語法，讓你可以直接提取特定屬性值並在函式內使用，而不需要在函式內部另外定義。第二種寫法則是傳統的方式，先將整個 props 物件存放在一個變數中，然後再從這個變數中提取出所需的屬性值。

幫prop設定default

我們也可以幫prop設定預設值

function Greetings({ name = "there", message = "溫馨提醒，明天就是週一了。" }) {
// ...
}

這樣一來，我們的預設值將會被鎖進props裡頭，一旦沒有資料傳送時，也可以正常運作。
譬如 裡頭沒有資料，但依然能夠顯示：

將JSX作為props傳遞

我們也可以 將 JSX 內容作為 props 傳遞給另一個元件。來看看以下的例子：

import Avatar from './Avatar.js';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

我們可以使用名為children的prop(children為約定俗成的命名)，透過childrenprop可以將，元素將被視為Card元件的子元素，並且作為一個childrenprop傳遞給Card元件。

而當我們去改動元素的內容時，它依然會按照改動的內容「原封不動」地傳給元件，透過這樣的方法能夠靈活地應變。

參考資料

1. React 官方文件 - Passing Props to a Component
2. The Joy of React by Josh W Comeau