Next.js中Headless UI Disclosure渲染Prop报错：函数不可作为客户端组件子元素

问题原因 #

Next.js 13+的App Router默认所有组件都是Server Components，这类组件在服务器端渲染，不允许将函数作为子元素传递，而你使用的Headless UI Disclosure的render prop模式（{({open}) => ...}）正好违反了这个规则，因此触发报错。

解决方案 #

只需将Example组件标记为Client Component，具体操作如下：

修改src/ui/Example.tsx #

在文件最顶部添加'use client'指令，这会告诉Next.js该组件需要在浏览器中执行，支持交互逻辑和函数子元素：

'use client'; // 必须添加这行，标记为客户端组件
import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/react";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import clsx from "clsx";

export default function Example() {
  return (
    <Disclosure>
      {({ open }) => (
        <>
          <DisclosureButton className="flex items-center gap-2 p-2 border rounded">
            Do you offer technical support?
            <ChevronDownIcon className={clsx("w-5 transition-transform", open && "rotate-180")} />
          </DisclosureButton>
          <DisclosurePanel className="mt-2 p-2 border rounded">
            No
          </DisclosurePanel>
        </>
      )}
    </Disclosure>
  );
}

额外说明 #

• 代码中给按钮和面板添加了基础样式（边框、内边距等），方便直观看到交互效果，你可以根据需求调整样式。
• Headless UI v2+也提供了无需render prop的组件式API，但只要添加了'use client'，原有的render prop写法就能正常工作。

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