Question

有一个＆＃34;门户＆＃34; pattern指定一个元素应该附加到document.body。我想要类似于此的东西，但是，它必须附加到特定组件。我的基本布局组件如下所示（Codepen Here）：

<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附加到该DOM节点中，而不是呈现给<Portal>。

我特别难以创建和存储对<PortalTarget>的引用，我似乎无法在没有redux的情况下找到一个好方法。

有没有办法在React中做到这一点？

Answer 1

如果使用外部库问题不是问题，只需在任何搜索引擎上键入“react portal”或“react gateway”。

那里有一些经过实战考验的图书馆。

在没有Redux的情况下将组件注入特定的div

1 个答案: