これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
ポータル
ポータルとは親コンポーネントの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 ); }
ポータルの典型的なユースケースは子要素がコンテナを飛び出して見える必要があるもの。
ダイアログやホバーカード、ツールチップなどがそれにあたる。
今日はここまで。