javascript - React HeadlessUI 中 Popover 中的对话框

Question

我有一个使用 HeadlessUI 的导航栏 Popover在手机上的汉堡菜单。默认情况下，当您点击/关注不在其中的元素时，此菜单会关闭。

现在我尝试添加一个模式 (HeadlessUI Dialog )，当我点击弹出菜单中的按钮时我想打开它。模式在 ModalButton 中使用组件定义(<><button><dialog></>)。这样做是为了分离关注点(与模态相关的所有内容都在 ModalButton 内)。

问题是:当我在导航栏的弹出菜单中并单击按钮打开对话框时。浏览器关注这个新对话框，因此弹出窗口失去焦点，使其关闭。由于它关闭，按钮(以及对话框同级)不再呈现，因此对话框立即消失。

作为引用，这是 react 树的伪代码:

<navbar>
  <popover>
    <>            {/* "ModalButton" containing both the button and the dialog */}
      <button />  {/* Button that opens the dialog */}
      <dialog />  {/* This uses a portal internally (with HeadlessUI) */}
    </>
  </popover>
</navbar>

我能想到几种方法来解决这个问题，但都不是很好:

1. 将模态拉到树中更高的位置，在弹出窗口/汉堡菜单之外，但仍在导航栏内。但这打破了关注点分离，因为导航栏现在必须担心模式的打开状态。
2. 将模态框放在树顶部的某处，并使用某种全局状态(需要状态管理库)来处理模态框的打开。
3. 也许有办法阻止 Popover从关注对话框时关闭？ (但在聚焦任何非对话框时仍然允许它关闭)

我很想听听有关解决此问题的任何想法。

Answer 1

您应该将对话框放在树中更高的位置。通常这些可以出现在页面级别，甚至是应用级别，具体取决于这些对话框的全局性。

然后，您可以使用您最喜欢的全局状态管理器或 useContext Hook 来指示这些对话框从您应用中的任何位置以编程方式打开。

在这种情况下，弹出窗口自动关闭应该不再是问题。