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中直接做加減

可以這樣做

輸出結果就如預期：