Reactガイドを読んでいくその77

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

ポータル

ポータルとは親コンポーネントのDOM海草街にあるDOMノードに対して子コンポーネントをレンダーするための公式の仕組みのことである。

ReactDOM.createPortal(child, container)

・第 1 引数 (child) :React の子要素としてレンダー可能なもの(要素、文字列、フラグメントなど)
・第 2 引数 (container) :DOM 要素を指定

使い方

通常はコンポーネントのrenderメソッドから要素を返すと最も近い親ノードの子としてDOMにマウントされる。

render() {
  // React は新しい div 要素をマウントし、子をその中に描画します
  return (
    <div>
      {this.props.children}
    </div>
  );
}

DOM上の異なる位置に入れた方が便利だったりすることもある。

render() {
  // React は新しい div をつくり*ません*。子要素は `domNode` に対して描画されます。
  // `domNode` は DOM ノードであれば何でも良く、 DOM 構造内のどこにあるかは問いません。
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

ポータルの典型的なユースケースは子要素がコンテナを飛び出して見える必要があるもの。
ダイアログやホバーカード、ツールチップなどがそれにあたる。

今日はここまで。