傳值（props）

傳「指令」給元件，改變它的外觀和行為

重點

props 是傳給元件的「訂單」，寫法和 HTML 的屬性一樣
接收的一方用函式的參數來接收：function Greeting({ name }) { ... }
不要改寫收到的 props。想改的時候，由傳入的一方來改

動手試試

function Greeting({ name }: { name: string }) {
  return <p>你好，{name}</p>
}

export default function App() {
  return (
    <div style={{ padding: 16 }}>
      <Greeting name="陳怡君" />
      <Greeting name="林志明" />
    </div>
  )
}

Open Sandbox

再加第三個 Greeting
也傳 age（年齡）給 Greeting，顯示「N 歲」（提示：{ name, age }）
試試看忘了傳 name 會怎樣

常見錯誤

元件名稱要以大寫字母開頭

寫成小寫的 <greeting>，會被當成 HTML 標籤。自己寫的元件要像 <Greeting> 這樣以大寫字母開頭。

傳入字串以外的值時，要用 { } 包起來

name="陳怡君" 是字串。要傳數字或變數時，就像 age={30} 這樣用 { } 包起來。