React入門 練習問題 34：React Portals（ポータル）の役割
Reactの「Portals（ポータル）」機能の目的と役割に関する説明として正しいものはどれか。
- 親コンポーネントのDOMツリーとは異なるDOMノードに、子要素をレンダリングするための機能である。
- 親コンポーネントのStateを、複数階層離れた子コンポーネントへ直接渡すためのデータ通信機能である。
- アプリケーション内で使用されるすべての画像や外部リソースを、単一のパスで管理するための機能である。
- コンポーネントのレンダリング結果をブラウザのLocalStorageに保存し、次回起動時に復元する機能である。
- コンポーネントを別のウィンドウやタブで開くために、ブラウザの標準APIをReactから呼び出す機能である。
正解と解説を見る
正解：親コンポーネントのDOMツリーとは異なるDOMノードに、子要素をレンダリングするための機能である。
React Portals（ポータル）は、親コンポーネントのDOMツリーとは異なるDOMノードに、子要素をレンダリングするための機能です。
【正解の理由】
モーダルウィンドウやツールチップなど、CSSのz-indexやoverflowの制約を回避して、DOMツリーの最上位に近い場所に要素を描画したい場合に利用されます。
【不正解の理由】
• 「親コンポーネントのStateを、複数階層離れた子コンポーネントへ直接渡すためのデータ通信機能である」という説明は誤り
• 「アプリケーション内で使用されるすべての画像や外部リソースを、単一のパスで管理するための機能である」という説明は誤り
• 「コンポーネントのレンダリング結果をブラウザのLocalStorageに保存し、次回起動時に復元する機能である」という説明は誤り
• 「コンポーネントを別のウィンドウやタブで開くために、ブラウザの標準APIをReactから呼び出す機能である」という説明は誤り