React中Headless UI Popover状态监听：外部按钮样式切换需求

Headless UI的Popover支持受控模式，完全可以通过自己维护状态来监听展开/收起状态，解决你上层导航按钮样式不变化的问题，具体步骤如下：

• 自己声明状态变量，替代组件内部的默认状态：

  import { useState } from 'react';
  import { Popover } from '@headlessui/react';
  
  function Navbar() {
    // 自己维护Popover的展开状态
    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
  
    // 其他导航相关代码...
  }
  

• 将状态和状态更新函数传递给Popover组件：

  <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
    {/* Popover触发器 */}
    <Popover.Button>打开下拉列表</Popover.Button>
    {/* 下拉面板内容 */}
    <Popover.Panel>
      {/* 大型下拉列表的具体内容 */}
    </Popover.Panel>
  </Popover>
  

• 在外部的「对比样式按钮」中使用这个状态控制样式：

  {/* 上层导航的对比按钮，不在Popover作用域内 */}
  <button 
    className={`contrast-btn ${isPopoverOpen ? 'active-white' : 'default-white'}`}
  >
    对比
  </button>
  

关于你提到的插槽内的open/closed参数：那是Popover内部插槽（比如Popover.Panel的子组件）里用来获取状态的，但如果要在Popover组件外部共享状态，受控模式是更直接的方案——自己维护状态变量就能轻松实现跨组件的状态同步。

内容的提问来源于stack exchange，提问作者Taylor Stocks