處理多個 props 傳入

繼續補充昨天的內容，昨天知道了如何把 props 傳入 Component 裡面並且在 Component 裡面使用他們。但有時候 Component 所需要的 props 會需要很多，像是：

function PlayerValue({ name, jerseyNumber, nickname, runValue }) {
  return (
    <div>
      <PlayerInfo
        name={name}
        jerseyNumber={jerseyNumber}
        nickname={nickname}
      />
      <p>{runValue}</p>
    </div>
  )
}

這樣寫會感覺有點繁瑣，這時候就可以使用 JavaScript 裡的 Spread Syntax，就能用比較簡單的一個 props 把全部所需的都傳進 Component 裡面，寫成：

function PlayerValue(props) {
  return (
    <div>
      <PlayerInfo {...props} />
      <p>{props.runValue}</p>
    </div>
  )
}

不過這樣也有可能會把不需要的也一起傳進 Component 裡面，所以我們也可以把需要的組成一個新的 object 後傳入 Component 再進行解構。

function PlayerValue({ name, jerseyNumber, nickname, runValue }) {
  const info = {
    name,
    jerseyNumber,
    nickname
  }
  return (
    <div>
      <PlayerInfo info={info} />
      <p>{runValue}</p>
    </div>
  )
}

function PlayerInfo({ info }) {
  const { name, jerseyNumber, nickname } = info
  
  return (
    <>
      <p>{name}</p>
      <p>{jerseyNumber}</p>
      <p>{nickname}</p>
    </>
  )
}

預設 props 值

如果我們在使用 Component 的時候沒傳入 props，但在相對應的 Component 裡面使用的話，就會得到 undefined

function PlayerValue({ name, runValue }) {
  const info = {
    name,
    jerseyNumber,
    nickname
  }
  return (
    <div>
      <PlayerInfo />
      <p>{runValue}</p>
    </div>
  )
}

function PlayerInfo({ name }) {
  return (
    <>
      // 會顯示 undefined
      <p>{name}</p>
    </>
  )
}

如果想讓 props 有預設值的話，可以在參數後方加入 等號 =，這樣只要在沒傳 props 或傳入的值是 undefined 的時候，就會直接使用預設值。但要注意如果是傳入 null 或是 0 的話不會使用到預設值而是直接使用上述兩個值。

function PlayerValue({ name, runValue }) {
  const info = {
    name,
    jerseyNumber,
    nickname
  }
  return (
    <div>
      <PlayerInfo />
      <p>{runValue}</p>
    </div>
  )
}

function PlayerInfo({ name = "LiHsuan" }) {
  return (
    <>
      // 會顯示 LiHsuan
      <p>{name}</p>
    </>
  )
}

用 children 傳遞 JSX

在寫 JSX 的時候，除了使用一些預設的 Html tag 來包各種 tag 之外，我們也可以用 Component 去包其他的 tags，這樣就會自動傳入 children 這個 prop 在 Component 裡面讓我們使用，之後我們就能自己決定這些包含的 tags 要顯示在哪裡。通常也會用在固定外觀區域（像是有匡線區域），但是裡面的東西不一樣的時候。children 會隨著包含的 tags 改變。

function Card({ children }) {
  return (
    <div style={{ border: "1px solid black"}}>
      {children}
    </div>
  )
}

function PlayerValue({ name, runValue }) {
  return (
    <Card>
      <p>{name}</p>
      <p>{runValue}</p>
    </Card>
  )
}

Props 是不可變的

在 Component 裡的 Props 是 不可變的（Immutable），也就是說是無法被改變的，只有在從 Parent Component 那邊重新傳入新的 Props 才會更新。如果我們要透過在網站上的互動而改變傳入的 Props 的話，就會需要用到另外一個東西叫做 State，這在之後的篇章會有更詳細的介紹。

小結

Props 會頻繁的在 React 裡面使用，目前介紹的篇章還比較基礎，但可以先知道 Props 是如何在 Component 之間傳遞的，之後會有更多多元的應用。
今天的文章就大概到這邊，感謝大家耐心地看完，如果有任何問題與建議都歡迎告訴我。明天的文章見，晚安。