React-[元件篇]-傳遞資料透過props

最近剛入門學習React，接觸props就有點眼花撩亂，於是就決定來書寫自己的『研究資料』，以便於我時時刻刻回來複習

• 筆記起手式：剛學React，很棒，我直接重複使用『元件』，會像這樣：
  
  
• 問題思考：
  • 這個<PersonalCard />元件樣式是會一直使用沒錯，但是重複使用時，到底要怎樣才能讓它不只顯示“小明”這個重複的資料呢？這樣做成元件才有意義啊！
  • 元件不能直接取用儲存在其他元件內的資料，這樣才能確保彼此獨立性，元件就是函式，因此在父元件函式中宣告的資料/變數，要怎麼傳遞給子元件使用呢？
  • hint:這時候就需要使用props!

什麼是props?

• props是你『客製化HTML標籤』的屬性(attributes)
  • 小複習：我們在學HTML標籤時，像是<a href="#" ></a>href就是a標籤的屬性

• 在Ｒeact中，你在父元件中寫入『自定義的HTML標籤（子元件在父元件被渲染時的參照位置）』，以上圖為例就是<PersonalCard />，

  • 我們在這個<PersonalCard />標籤中寫入的屬性，React會自動將該標籤中的屬性 生成『props物件中的key』，然後該標籤中的屬性對應值，就等同於props物件中的valueprops {key:value}

• 小結：

  • 總之，學習React，我要對『自定義的HTML標籤』養成敏銳的感覺就是，就要將該標籤中的屬性與值聯想成 props物件中{key:value}

props的傳遞步驟

對props好像還是有一點迷糊，我就來分解props的動作：

• 圖像式1:
  

• 圖像式2:
  

props 規則-單向數據流（父元件->子元件）

• 圖像解釋props 系統：
  

練習思考：

• 其實props概念很簡單，但要練習思考：
  • 哪些資料是我們要傳遞的？
  • 要給屬性取什麼名字？
  • 我們該傳遞什麼資料 string?object?function?array?

props參數解構：

我可以將上面的props物件資料做解構一樣不影響：

方便自己下次從這裡連到程式碼：sandcodebox

筆記參考來源：

Udemy-Modern React with Redux [2023 Update]
Udemy-The Complete Guide 2023 (incl. React Router & Redux)