UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【React】親コンポーネント外に要素を追加する

jQueryでやっていたようなbodyの最後に要素を追加するようなことをReactでやりたい

以下の記事を読むにPortalを使うのがよさそう

chaika.hatenablog.com

Portal

Portalはまさにやりたかった、親コンポーネントの DOM 階層外にある DOM ノードに対して子コンポーネントをレンダーするための公式の仕組み

ja.reactjs.org

使いかた

ReactDOM.createPortal(child, container)

childは追加した要素で、

containerはbodyの最後に追加したければdocument.bodyになる

結構簡単にできた

ポータルは DOM ツリーのどこにでも存在できるが、通常の React の子要素と変わらずに振る舞う

そのため、context)のような機能もつかえるのが良い