React-[入門篇]-Props基礎


我們如何在從父元件中傳遞資料給子元件?
就是需要使用到 props!

props

父元件與子元件

我們可以把props想像成親子元件間溝通訊息的橋樑:

將Pizza元件中的資料,寫進巢狀在Menu之下的<Pizza />元件標籤裡頭的屬性值


但是這都是發生在Menu元件內,Pizza元件無從得知這些資料,因此我們會將props(物件)作為參數傳入到Pizza元件中

要將props作為參數傳到Pizza元件中


輸出結果,會輸出兩次是因為嚴謹模式 React.strictMode

就會發現在父元件Menu中給子元件Pizza定義的屬性與值等資料,都會變成物件中的key: value

將props中的值取出來寫入到Pizza元件中


創建第二個Pizza元件,資料完全不同於第一個



神奇出現不一樣的Pizza資料

稍微整理一下,加入price


提高price在JS中直接做加減



可以這樣做

輸出結果就如預期:

#React入門 #Props







你可能感興趣的文章

關於 物件 Object - 物件建構式

關於 物件 Object - 物件建構式

ASP.NET Core Web API 入門教學 - 使用PATCH局部更新資料

ASP.NET Core Web API 入門教學 - 使用PATCH局部更新資料

Day03  自製收費廣告版位 - 使用 react-intersection-observer

Day03 自製收費廣告版位 - 使用 react-intersection-observer






留言討論