更改 Popover 内部状态 - Headless UI

Question

如何使用组件外部的函数更改 Popover 的内部状态：就像我在下面创建的 openPopover 函数一样。

const openPopover = () => {
    setPopoverOpen(true) // Example..
}

<Popover>
  {({open}: {open: boolean}) => {
    // How do i change the open state here from outside the Popover.

    return (
      <>
        <Popover.Button>
          Test
        </Popover.Button>

        {open && (
          <Popover.Panel static>
            Test
          </Popover.Panel>
        )}   
      </>
    )
  }}
</Popover>

Answer 1

Popover 在内部管理打开状态，并且不公开更改此状态的方法。

然而，为了跟踪打开状态，您可以使用useEffect渲染道具内部。

const [isPopoverOpen, setIsPopoverOpen] = useState(false);

<Popover>
  {({open}: {open: boolean}) => {
    useEffect(() => {
      setIsPopoverOpen(open)
    }, [open]);

    return (
      <>
        <Popover.Button>
          Test
        </Popover.Button>,
   
        {open && (
          <Popover.Panel static>
            Test
          </Popover.Panel>
        )}   
      </>
    )
  }}
</Popover>

切换行为由组件处理<Popover.Button>。或者，Popover并Popover.Panel公开close()关闭弹出窗口的方法。您始终可以使用Portals使组件在父级中可用，以处理切换或执行close()方法。

import { createPortal } from 'react-dom';

<Popover>
  {({ open, close }) => {
    return (
      <>
       {createPortal(
        <Popover.Button>
          Toggle popover
        </Popover.Button>,
        // html node where we will position this button
       )}

        {open && (
          <Popover.Panel static>
            Test
          </Popover.Panel>
        )}

       {createPortal(
         <button onClick={close()}>
            Close Popover
         </button>,
         // html node where we will position this close button
        )}
      </>
    )
  }}
</Popover>