使用Astro与Shadcn UI Drawer组件时触发报错求助

问题原因 #

Shadcn UI的Drawer组件基于Dialog封装，依赖客户端上下文传递。Astro默认以静态方式渲染组件，导致Drawer的上下文无法在服务端渲染阶段正确传递给内部的DrawerTrigger，从而触发该错误。

解决方案 #

1. 为Drawer组件添加客户端激活指令
   在Astro中需显式指定组件在客户端运行，确保上下文正常传递。给<Drawer>标签添加client:load或client:idle指令，让组件在客户端完成初始化。

2. 确认Drawer组件实现的正确性
   检查@/components/ui/drawer.tsx文件，确保代码正确基于Radix UI的Dialog组件封装，标准实现示例如下：

   import * as Dialog from "@radix-ui/react-dialog";
   import { cn } from "@/lib/utils";
   
   const Drawer = Dialog.Root;
   const DrawerTrigger = Dialog.Trigger;
   const DrawerContent = Dialog.Content;
   // 其他Drawer相关组件的导出逻辑...
   

修改后的代码示例 #

---
import '@/styles/globals.css'
import { Icon } from 'astro-icon/components';
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { Button } from '@/components/ui/button';

---

<html lang="en">
    <head>
        <title>Astro</title>
    </head>
    <body>
        <Icon name="Logo" />
        <Button>Hello World</Button>
        <!-- 添加client:load指令激活客户端上下文 -->
        <Drawer client:load>
            <DrawerTrigger asChild>
                <Button>Open</Button>
            </DrawerTrigger>
            <DrawerContent>
              <DrawerHeader>
                <DrawerTitle>Are you absolutely sure?</DrawerTitle>
                <DrawerDescription>This action cannot be undone.</DrawerDescription>
              </DrawerHeader>
              <DrawerFooter>
                <Button>Submit</Button>
                <DrawerClose asChild>
                  <Button variant="outline">Cancel</Button>
                </DrawerClose>
              </DrawerFooter>
            </DrawerContent>
          </Drawer>
          
    </body>
</html>

注：给DrawerTrigger和DrawerClose添加asChild属性是Shadcn组件的最佳实践，可让内部Button组件直接继承触发器的交互逻辑。

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