在“@headlessui/react”中，如何将 'Popover' 'open' 道具传递给它的父组件答案

【问题标题】：In "@headlessui/react", how to pass 'Popover' 'open' prop to it's parent component在“@headlessui/react”中，如何将 'Popover' 'open' 道具传递给它的父组件
【发布时间】：2021-10-23 00:48:58
【问题描述】：

我正在使用“@headlessui/react”中的“Popover”组件，并且我想在弹出框打开/关闭时采取行动，而不更改默认的打开/关闭行为。

所以我正在考虑将“Popover”组件的“打开”道具传递给包装器组件，然后执行我想在 useEffect 中执行的 fn。但是我不确定我该怎么做。

https://headlessui.dev/react/popover

【问题讨论】：

标签： reactjs tailwind-css

【解决方案1】：

听起来你在使用包装器组件时走在了正确的轨道上。但是，我建议将您想要执行的函数传递给弹出框并在那里的 useEffect 中运行它。

想法如下（使用 Headless UI 网站中的一个示例）：

import { useEffect } from 'react'
import { Popover } from '@headlessui/react'
import { ChevronRightIcon } from '@heroicons/react/solid'

function MyPopover() {
  const functionToExecuteOnOpen = () => {
     // do something
  }

  return (
    <Popover>
      {({ open }) => {
        useEffect(() => {
          if (open) {
             functionToExecuteOnOpen()
          }
        }, [ open ])

        return (
        <>
          <Popover.Button>
            <span>Solutions</span>
            <ChevronRightIcon
              className={`${open ? 'transform rotate-90' : ''}`}
            />
          </Popover.Button>

          <Popover.Panel>{/* ... */}</Popover.Panel>
        </>
      )}
    </Popover>
  )
}

您可以删除 useEffect 中的 if 语句，如果您希望它在每次 open 更改时运行（无论值如何），只需调用该函数即可。

【讨论】：