React－用 portal 把元件移到我想要的位置

頗邊緣的 Method。

簡述

就如標題所說的，有時候我們可能會想調整元件在 HTM Ｌ中的位置。

舉例來說，假設我們有一個 App，裡面有 Modal 這個元件，那在 HTML 中就會這樣呈現：

Modal 會放在 App 裡面，合情合理。

不過有沒有辦法把他變成這樣子？

像這樣子把 Modal 放到 body 的最後面。

還真的有，就是用 ReactDOM 的 createPortal 來實現：

import React from 'react'
import ReactDOM from 'react-dom'

export default function Modal({ children, setModal }) {
  return ReactDOM.createPortal(
    <div className='modal-backdrop'>
      <div className='modal'>
        {children}
        <button className='btn' onClick={() => setModal(false)}>
          Close
        </button>
      </div>
    </div>,
    document.body
  )
}

第一個參數放 JXS，第二個參數則是放你想要的 DOM 元素，以這個例子來說我選擇的是 body 這個元素。

只要改用這種方式後就能自行決定元件的渲染位置囉。