Reduxなしで特定のdivにコンポーネントを挿入

Question

document.bodyに要素を追加するように指定する「ポータル」パターンがあります。これに似たものが欲しいですが、特定のコンポーネントに追加する必要があります。次のように私の基本的なレイアウト・コンポーネントは、（Codepen Here）になります。その代わりdocument.bodyにレンダリングの

<div className={styles.container}> 
    <div className={styles.header}> 
    <Navbar /> 
    </div> 

    {/* Here be the problem */} 
    <PortalTarget /> 

    <div className={styles.content}> 
    <div className={styles.leftSidebar}> 
     <SidebarNav /> 
    </div> 
    <div className={styles.main}> 
     {children} 
    </div> 
    </div> 
</div> 

、それはPortalTarget要素を見つける（理想的には一つだけがレンダリングされます）し、そのDOMノードに<Portal>を追加する必要があります。

具体的には<PortalTarget>への参照を作成して保存する際に問題が発生していますが、私はそれを行うことができません。

Reactでこれを行う方法はありますか？

Answer 1

外部ライブラリを使用しても問題がない場合は、検索エンジンに「react Portal」または「react Gateway」と入力してください。

いくつかのバトルテスト済みのライブラリがあります。