search
LoginSignup
8

More than 3 years have passed since last update.

posted at

updated at

Organization

ReactのPortalを使ってみた

React 16では、Portalという新機能が登場しています。

何ができるのか

Portalは、ReactのDOMノードの一部を、実際のDOMでは別な箇所にマウントできる機能です。使い方としては、

などが考えられます。

使い方

ポータルは、ReactDOM.createPortalから作成します。

ReactDOM.createPortal(コンポーネント, DOMノード[, key])

コンポーネントには、ポータルの中にセットするコンポーネント(単なるJSXでももちろんOK)を書きます。そして、DOMノードとして、そのコンポーネントが実際に描画されるDOMノードを指定します。keyは、他のReactエレメントにつけるkeyと同じもので、大量のポータルを.mapで一括生成する場合などに必要となります。

なお、ReactDOM.createPortalの結果自体も一種のReact DOMであって、他のReactコンポーネントに埋め込んで描画する必要があります。Reactの公式サイトには直接render()の返り値にする例がありますが、特にそれに限られません。

render() {
  return (
    <div>
      {
        /* このように、子要素として埋め込むことも可能 */
        ReactDOM.createPortal(....)
      }
    </div>
  );
}

便利な点

上に挙げた記事のように、内部からReactDOM.renderを使うことでも、別の位置に出すコンポーネントを制御することは、できなくもないです。ただ、ポータルを使うと、いろいろ便利な点があります。

  • ふつうにrender()するだけでいいので、今表示中だったか非表示だったかなどを自前で管理する必要がない
  • Reactの扱い上は、別な位置にあっても子コンポーネントになる
    • コンテキストもそのまま子で使える
    • イベントも親コンポーネントへバブリングする
    • Reactのデバッガでも、子コンポーネントとして表示される

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
8