【React/Portal】関数コンポーネントで作るPortalの使い方

モーダルやスナックバーなどを使用するとき、z-indexの関係でうまく一番上に出てこない…なんてことありますよね。そんな悩みに、React Portalという救世主がいるのでご紹介します。

React Portalとは
設定方法・使用例

React Portalとは

Reactの公式ドキュメントでは、以下のように説明されています。

ポータル (portal) は、親コンポーネントの DOM 階層外にある DOM ノードに対して子コンポーネントをレンダーするための公式の仕組みを提供します。
ポータル – React (https://ja.reactjs.org/docs/portals.html)

とても簡単に言うと、親子関係を無視して、コンポーネントを好きなところに置ける仕組みです。

例えば、z-indexが低いコンポーネントの中で、あるコンポーネントの重なりを全体の一番上にしなければならない時などに役立ちます。

設定方法・使用例

React DOM.createPortalの設定方法
第一引数：別の場所にレンダーさせるコンポーネント
第二引数：レンダーさせる部分のDOMノード（document.body、document.getElementById(‘modal’)など）

import React from 'react'
import ReactDOM from 'react-dom' // react ではなく react-dom　からインポート

import { Child　} from './Child.tsx'

const Modal: React.FC = ({children}) => {
　　// 今回はbody要素の部分にレンダーさせる
  return ReactDOM.createPortal(
    <>{children}</>
    , document.body 
   )
}

export const Parent: React.FC = () => {
  return (
    <>
      <p>parent</p>
      <Modal>
        <Child />
      </Modal>
    </>
  )
}