5. 使用 props 向下傳遞資料

學習重點 => 網頁中的「資料」會在這些元件之間流動，帶動畫面的改變。
要如何在元件之間傳遞資料呢？

• 透過 props (properties) 傳遞資料，以「父元件」傳入「子元件」為範例
• (反之，子元件在更新後，也需要傳遞資料給父元件，後面的單元)

Q1 掌握在 React 世界裡，「資料」要怎麼在元件之間流動。

當你在 Thinking in React 單元建構你對 React 的全局觀時，其實已經初步看過「資料流動」的縮影了，你可以到 Thinking in React 的第四步驟 - Step 4: Identify where your state should live 回顧。補

Q2 在子元件裡如何讀取父元件傳進來的 props？

元件的本質是 function，所有傳入的參數都會包在一個名叫 props 的物件中，是 React 專用的特殊名稱，你可以透過 console.log(props) 來觀察 props 的資料結構。補

取用 props 的值有兩種寫法：

• 一種是 props.屬性名稱 ，傳入參數時傳 props， 在子元件中能以props.size 讀取；
• 另一種是解構賦值的寫法，傳入參數時傳 {size} ，在子元件中就能直接以 size 來讀取。

請利用範例來幫助你了解兩種用法，可以自行修改成另一種。 補

Q3: 在 React 中，props 的功能是什麼？

像是HTML標籤內的屬性。
props 是傳給JSX tag的資訊。
父元件可以傳props給子元件。

Q4: 除了原始資料型別 (Primitive data types) 和物件型別 (Object types) 可以傳遞，函數是否也可以傳遞？

可以。
只要是JS表達式，都可以寫入curly braces { }內，
寫法: 屬性={呼叫函式}。

Q5:把 props 傳遞到 Component 時，props 的型別可以有哪些？

字串、數值、陣列、函式

Q6:請解釋 props 中的 children 及說明它的功能。

Q7:使用 Component Children Prop 時，children 只會有一個嗎？

對

THX CHATGTP 不一定 (補

Q8:當不定量或是大量 props 要送給 child component 時，可以怎麼寫？

THX CHATGTP
當不定量或大量的props要傳遞給子元件時，可以使用JSX的展開語法（Spread Syntax） 來傳遞所有的props。
在父元件中，子元件以curly braces{ }包住 三個點（...）展開props

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

這樣做會將所有的props傳給子元件。
子元件可以使用解構賦值的方式來取得需要的props，也可以通過props對象來訪問所有的props。
這種方式不僅可以簡化代碼，還可以保持代碼的清晰度和可讀性。
但需要注意的是，不要過度使用展開語法，以免過度複雜化代碼和降低性能。