每個元件只能存在一個 root element

通常會用 <div> 或任何容器去包起來

但專案越來越大時，也就會形成巢狀地獄

<div>
  <div>
    <div>
      <div>
        <div>
          <!-- ???? -->
        </div>
      </div>
    </div>
  </div>
</div>

---

解巢小幫手

1. 用 props.children

// wrapper

const Wrapper = props => props.children

export default Wrapper

// 元件程式碼
return (
  <Wrapper>
    <div>WOW</div>
    <div>HELLO!</div>
  </Wrapper>
)

// 實際上的DOM
<div>WOW</div>
<div>HELLO!</div>

2. React.Fragment

用法如上，但就不用建立一個元件了，也快很多

return (
  <React.Fragment>
    <div>WOW</div>
    <div>HELLO!</div>
  </React.Fragment>
)

---

神奇的 PORTAL

也算跟解巢有關係

當今天有 pop-up modal 時，可能會放在某個按鈕或表單附近

但顯示的地方與實際 DOM 結構卻不直覺

且 CSS 若使用進階一點的語法(child…等)，就可能會影響到樣式

PORTAL

{
  ReactDOM.createPortal(HTML / XML, selector)
}

• 第一個參數，寫入樣子
• 第二個參數，用 querySelector / getElementById 皆可，要實際渲染的位置

如下圖，當我觸發 modal pop-up 時，會將 modal 渲染於 backdrop-root overlay-root (另一個 DOM tree)

真是太神奇了!