[React] モーダルの作り方

概要

今回はモーダルの作り方についてみていきます。
モーダルは項目を削除する時とかに出てくる画面のことで、「本当に削除しますか？」に対して「はい」、「いいえ」みたいに選択できるものです。

ポータル

モーダルは画面いっぱいを占領するので他の要素よりもトップに来なければいけません。
そこでポータルについて意識しないといけません。
簡単にいうと構造的に深くに作ってはダメで、浅いところに作るということです。

実装していく

基本的に最初の方で

src/index.js

ReactDOM.render(
  <App />,
  document.querySelector('#root')
);

のようにして開発していきますが、ここの配下にモーダルを作ると構造的に深くなってしまうので、モーダルを作るときにはroot以外にidを指定して場所を作ってあげてそこに対して作っていきます。

public/index.html

<div id="modal"></div>

上記は例としてid="modal"として新たに要素を作っています。

src/components/Modal.js

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

const Modal = props => {
  return ReactDOM.createPortal(
    <div className="">
      <div className="">
        This is a Modal!!
      </div>
    </div>,
    document.querySelector('#modal')
  );
};

export default Modal;

上記ではReactDOM.createPortalメソッドを使っており第一引数に表示したい画面の内容、第二引数に場所を指定しています。
適当にcssつけてみてください。
あとは表示したいコンポーネントで使ってあげるという感じです。

まとめ

簡単にモーダルの作り方を説明しました。
参考になれば幸いです。