將組件注入到沒有Redux的特定div中

有一個「門戶」模式，它指定一個元素應該附加到document.body。我想要類似這樣的東西，但是，它必須附加到特定的組件。我的基本佈局組件將如下所示（Codepen Here）：將組件注入到沒有Redux的特定div中

<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>

相反渲染document.body的，它應該找到PortalTarget元素（只有一個最理想會被渲染），然後追加<Portal>成DOM節點。

我在創建和存儲對<PortalTarget>的引用時遇到了困難，我似乎無法找到一個不使用redux的好方法。

有沒有辦法在React中做到這一點？

來源

2017-05-01 corvid

你可能會對https://github.com/camwest/react-slot-fill感興趣（儘管我還沒有嘗試過）。 –

-1

如果不使用外部庫問題，只需在任何搜索引擎上輸入「react portal」或「react gateway」即可。

在那裏有幾個經過測試的圖書館。

來源

2017-05-01 18:53:30

在代碼中，他們具體有'document.body'編碼在 – corvid

通常讀取第一個serp結果是好習慣。請閱讀反應geteway文檔：https：//github.com/cloudflare/react-gateway –

將組件注入到沒有Redux的特定div中

回答

相關問題