React筆記 | 用 props 讓父組件傳話給子組件

這次要筆記的是：

Props

為 react 框架中三大重要機制之一，全名為 properties，也就是「屬性」，另外二個機制分別為 state 和 ref，之後再來筆記

那 props 主要用途是做什麼的？

幫父親傳話給兒子

簡單來說，就是父組件有任何資訊要傳遞給子組件，都可以直接透過 props 就輕鬆達成，所以當組件只有父層與子層的關係時，很適合用 props 來做傳遞，但以下有幾點特點要稍微注意一下：

• 單向傳遞：props 只允許父傳子，不允許子傳父，也就是只有父組件有資格傳遞資料給子組件 ( 父親最大！)
• 不能修改：子組件接收到 props 資料後，不可以更改，只有父組件可以修改，所以若需要修改，只能從父組件那邊改完再重傳 ( 一樣，父親最大！)
• 傳遞資料類型：不限，字串、數字、物件、陣列、函數…等資料類型都可以
  → 若資料類型為數字，要用 { } 包起來，不然用 “ ” 都會被視為字串

---

---

1. 建立父組件、子組件

說明：

這邊就用「函數式組件」來建立父組件和子組件，名稱分別 Dad 和 Son，然後還要把子組件塞在父組件裡面，這樣才會形成父子關係

2. 父組件將資料傳遞給子組件

說明：

父組件傳遞三個資料給子組件，分別為 name ( 字串 )、age ( 數字 )、message ( 函數 )，傳遞的寫法其實就跟 html 標籤內的屬性寫法很相像，<子組件名稱 屬性名稱=屬性值 /> ，若有多個資料要傳遞，中間用「空格」隔開即可

• name 的資料型別為字串，直接用 “ ” 或是 ‘ ’ 包起來
• age 的資料型別為數字，所以要用 { } 包起來
• message 的資料型別為函數，所以要用 { } 包起來，裡面再寫回調函數

3. 子組件接收資料

說明：

先在子組件的函數上寫參數名稱，通常為 props ( 也是可以換其他名稱，通常建議還是 props 比較好理解 )，因為資料是以「物件」的形式傳遞過來，所以要用 props.屬性名稱 把值取出來，也可以用 解構賦值 來取值

若接收到的資料為函數，後面要記得加上( )

用「props.屬性名稱」取值

用「解構賦值」取值

4. 呈現的結果

子組件將從父組件所接收到的 name 和 age 呈現在畫面上，並且執行 message 函數在主控台輸出資料

---

參考：

2小時React快速入門 – React基礎教學
020 尚硅谷react教程 props的基本使用

以上，就這樣囉！