React－關於 children 這個 props 的適用時機

希望寫出越來越優雅的 Code。

簡述

以前我一直不太知道 children 這個 props 可以用在什麼地方？只覺得他是蠻邊緣的東西。

不過最近在看教學影片時體會到了 children 的妙用之處，所以決定寫一篇簡短的筆記來記錄一下。

Modal

一個最簡單的範例就是 Modal。

怎麼說？想想看，一個 modal 的內容有可能是這樣：

也有可能是這樣：

以第一個來說的話他的結構應該會長這樣：

export default function Modal() {
  return (
    <div className='modal-backdrop'>
      <div className="modal">
        <h2>Some kind of modal title</h2>
        <p>Some kind of modal content like so.</p>
      </div>
    </div>
  )
}

第二個的話會長這樣：

export default function Modal() {
  return (
    <div className='modal-backdrop'>
      <div className="modal">
        <h2>Some kind of modal title</h2>
        <img className='sample-img' src="..." alt='sample'/> 
        <p>
          Lorem ipsum dolor sit amet consectetur 
          adipisicing elit. Ex nostrum delectus
          et velit recusandae quam eveniet?
        </p>
      </div>
    </div>
  )
}

這個時候就要思考，如果我想讓 Modal 的可重用性發揮到最大的話，該怎麼做比較好？尤其是這種結構可能不太一樣的情況下。

其實就是標題說的，這就是 children 的適用時機。

如果用 props 的話，我沒有辦法同時讓 Modal 支援第一種結構，又支援第二種結構。

可是用 children 的話就不同了，children 有一個最大的特色是可以把 JSX 當作 props 傳給元件。

所以呢，要達到最開始提到的需求的話，可以這樣子寫：

export default function Modal({ children }) {
  return (
    <div className='modal-backdrop'>
      <div className="modal">
        {children}
      </div>
    </div>
  )
}

接著當我要用 Modal 的時候，只要把內容當作 children 傳進去就搞定了：

<Modal>
   <h2>Some kind of modal title</h2>
    <img className='sample-img' src="..." alt='sample'/> 
    <p>
      Lorem ipsum dolor sit amet consectetur 
      adipisicing elit. Ex nostrum delectus
      et velit recusandae quam eveniet?
    </p>
</Modal>

輕輕鬆鬆～