React Fragment－以前沒發現到的小技巧

解惑了。

簡述

寫過 React 的人應該都知道，一個 Component 只可以用一個根元素，像這樣：

function Component () {
  return (
    <div>
      <h1>Title</h1>
      <p>PeaNu's party time</p>
    </div>
  )
}

如果寫成這樣的話就會報錯：

function Component () {
  return (
    <h1>Title</h1>
    <p>PeaNu's party time</p>
  )
}

但如果外面不想包一層 <div> 的話怎麼辦？這時候最簡單的作法就是改用 React Fragment 來包住：

function Component () {
  return (
    <>
      <h1>Title</h1>
      <p>PeaNu's party time</p>
    </>
  )
}

可是如果是「渲染列表」的情況下，這樣會有一點問題：

function Component () {
  return (
    {items.map(item => (
      <key={item.id}>
        <ul>
          <li>{item.value}</li>
        </ul>
      </>
    ))}
  )
}

當要傳入 key 這個 props 時就沒辦法用 <></> 的方式來寫。

但如果還是想用 Fragment 的話怎麼辦？其實可以改寫成這樣：

function Component () {
  return (
    {items.map(item => (
      <React.Fragment key={item.id}>
        <ul>
          <li>{item.value}</li>
        </ul>
      </React.Fragment>
    ))}
  )
}

嗯！這個就是這篇文章想說的：

React.Fragment 是可以有 props 的，只是不可以用在縮寫的形式。