如何在Headless UI React的Disclosure组件展开时触发函数？

你可以通过两种实用方式实现面板展开时触发数据层事件：

方法一：监听open状态变化（推荐） #

利用React的useEffect钩子监听Disclosure提供的open状态，当状态从关闭切换为展开时，推送Google数据层事件：

import { useEffect, useRef } from 'react';
import { Disclosure, Transition } from '@headlessui/react';

const YourAccordion = () => {
  const ref = useRef(null);
  const setHeight = () => {
    // 你的setHeight逻辑实现
  };

  return (
    <Disclosure>
      {({ open }) => {
        useEffect(() => {
          // 仅在面板展开时发送事件
          if (open) {
            window.dataLayer = window.dataLayer || [];
            window.dataLayer.push({
              event: 'accordion_expanded',
              accordion_name: 'NAME' // 替换为实际面板名称，方便后续分析
            });
          }
        }, [open]);

        return (
          <>
            <Disclosure.Button className={...}>
              NAME
            </Disclosure.Button>
            <Transition
              show={open}
              ref={ref}
              className="..."
              enter="..."
              enterFrom="m..."
              beforeEnter={setHeight}
              leave="m..."
              beforeLeave={() => {
                if (ref.current) ref.current.style.maxHeight = '0px';
              }}
            >
              <Disclosure.Panel>
                <div className={...}>
                  PANEL CONTENT
                </div>
              </Disclosure.Panel>
            </Transition>
          </>
        );
      }}
    </Disclosure>
  );
};

这种方式能精准捕捉面板展开的时机，不会因重复点击按钮触发多余事件。

方法二：在按钮点击时判断状态 #

直接在Disclosure.Button的点击事件中判断当前状态，若点击后面板会展开，则发送事件：

<Disclosure.Button 
  className={...}
  onClick={() => {
    // 当前面板处于关闭状态，点击后会展开
    if (!open) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'accordion_expanded',
        accordion_name: 'NAME'
      });
    }
  }}
>
  NAME
</Disclosure.Button>

这种方式逻辑直观，适合不需要监听状态变化、仅在点击触发展开时执行的场景。

注意事项 #

• 代码中先做了window.dataLayer = window.dataLayer || []的判断，确保数据层对象存在，避免报错。
• 可根据需求自定义事件名称（如accordion_expanded）和携带参数（如accordion_name），方便在Google Analytics中分析用户行为。

内容的提问来源于stack exchange，提问作者Yan Digilov