React+shadcn嵌套Dialog中CreateButton自动触发弹窗问题求助

问题原因 #

你遇到的弹窗内CreateButton自动打开下一层弹窗的问题，本质是Dialog上下文冲突：主布局中的Dialog包裹了整个Outlet，导致所有嵌套的DialogTrigger都共享同一个Dialog上下文。当父级弹窗打开时，子弹窗的DialogTrigger会错误地触发上下文内的弹窗打开逻辑，而非等待用户点击。

解决方案 #

让每个CreateButton组件拥有独立的Dialog实例，自行管理弹窗状态，避免与父级Dialog上下文冲突。修改后的代码如下：

import { useState } from 'react';
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';

export function CreateButton(props: {
  goToElement: React.ReactNode;
  variant?:
    | "default"
    | "destructive"
    | "outline"
    | "secondary"
    | "ghost"
    | "link"
    | null
    | undefined;
  title?: string;
  description?: string;
}) {
  // 为当前组件独立管理弹窗的打开状态
  const [open, setOpen] = useState(false);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant={props.variant}>{props.title}</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{props.title}</DialogTitle>
          <DialogDescription>{props.description}</DialogDescription>
        </DialogHeader>
        {props.goToElement}
      </DialogContent>
    </Dialog>
  );
}

关键改动说明 #

• 移除原来的空标签包裹，改为用Dialog组件包裹整个内容，每个CreateButton对应一个独立的Dialog实例
• 通过useState维护当前组件专属的弹窗打开状态open，避免与外部上下文共享状态
• 明确绑定Dialog的open和onOpenChange属性，完全掌控弹窗的显示逻辑

这样修改后，无论CreateButton是在主页面还是弹窗内渲染，都会独立管理自己的弹窗，不会出现自动触发打开的问题。

内容的提问来源于stack exchange，提问作者Miguel Armando Tinembart