Props 是什麼?
Pros 是 Properties 的簡稱,中文翻譯為:屬性。具有以下幾點特性:
- 父組件向子組件傳遞數據:(圖ㄧ)
讓父組件(Parents component)將數據透過 props 屬性傳遞到子組件(Child component),此處需要注意子組件是無法修改或回傳數據給父組件的,子組件只能讀取從父組件得到的數據。 - 讓組件變得可重用:(圖二)
props 可以讓組件在不同的情況下使用同一個模板,而僅僅依賴於不同的數據。這樣能大大提高組件的重用性。 - 傳遞回調函數:(圖三)
除了傳遞靜態數據外,props 也可以用來傳遞回調函數,使子組件能夠通知父組件發生了某些事件。 - 動態渲染內容:
props 允許組件根據不同的數據來渲染(render)不同的內容,從而實現動態更新視圖的效果。 - 不可變的數據流:
props 是不可變的,這意味著子組件無法修改父組件傳遞進來的 props。這種單向數據流的設計,使 React 應用程序的數據管理變得更簡單,數據流向更清晰。
父組件控制數據的來源,而子組件只負責展示數據。
子組件如果需要與父組件溝通,可以透過 props 傳遞回調函數,讓父元件進行數據的更新。 - 以解構賦值的方式取代 props(圖四):
值得注意的是,如果要以解構賦值的方式取代 props ,需要在小括弧 ( ) 中再加入一個中括弧 { } 。
以下是為了能夠滿足段落所需的長度而定義的無意義內文,請自行參酌編排。
props 的其他運用
- 預設值的設定:
上述最後提及可用解構賦值的部分取代 props ,另外也可在解構賦值中加入預設值,如果父組件中沒有設定參數的數值,系統將自動認定為預設值。如(圖五)所示,設定參數 address 的預設值為 “Yilan” ,父組件中第一筆資料有設定參數 address 的數值為 “Taipei”,網頁中即呈現 Taipei 。第二筆資料並未設定參數 address 的數值,所以系統直接認定其數值為預設值 “Yilan”。 - 組件的傳遞:
props 也可以用來傳遞組件,如(圖六)所示,將組件 SecondFunction 的數據透過參數 children 傳遞至組件 FirstFunction 之後再傳遞給父組件 App。由此可見 React 透過 props 可以有許多彈性化的操作,但切記如上述所說的子組件是無法修改或回傳數據給父組件的,子組件只能讀取從父組件得到的數據(單向數據流的設計)!