React中如何实现无需调用Hook即可全局调用Modal组件？

核心思路 #

Zustand允许直接访问store实例的getState和setState方法，无需通过React Hook。我们可以基于这个特性封装全局调用API，替代每次都要调用useModal()的重复操作。

步骤1：修改Zustand Store的导出 #

修改你的Zustand状态管理代码，直接导出store实例，同时保留原有的Hook供组件订阅状态：

// zustand state management
import { create } from 'zustand';

type UseModalType = {
  isOpen: boolean;
  title: string;
  description: string;
  children: React.ReactNode;
  labels: { cancel: string; confirm: string };
  footer?: React.ReactNode;
  onActionButtonA: () => void;
  onActionButtonB: () => void;
  onOpen: (params: Partial<Omit<UseModalType, 'isOpen' | 'onOpen' | 'onClose'>>) => void;
  onClose: () => void;
};

// 创建store实例
const modalStore = create<UseModalType>((set) => ({
  isOpen: false,
  title: '',
  description: '',
  children: <div />,
  labels: { cancel: '', confirm: '' },
  onActionButtonA: () => set({ isOpen: false }),
  onActionButtonB: () => set({ isOpen: false }),
  onOpen: ({
    title,
    labels,
    description,
    footer,
    onActionButtonA,
    onActionButtonB,
    children,
  }) => {
    set((prev) => ({
      ...prev,
      title: title || prev.title,
      labels: labels || prev.labels,
      description: description || prev.description,
      children: children || prev.children,
      footer: footer || prev.footer,
      onActionButtonA: onActionButtonA || prev.onActionButtonA,
      onActionButtonB: onActionButtonB || prev.onActionButtonB,
      isOpen: true,
    }));
  },
  onClose: () => set({ isOpen: false }),
}));

// 保留原Hook供组件使用
export const useModal = modalStore;

// 封装全局调用API
export const modals = {
  open: modalStore.getState().onOpen,
  close: modalStore.getState().onClose,
  // 封装快捷确认弹窗方法
  openConfirmModal: (params: {
    title: string;
    description?: string;
    children?: React.ReactNode;
    labels?: { cancel: string; confirm: string };
    onCancel?: () => void;
    onConfirm?: () => void;
  }) => {
    modalStore.getState().onOpen({
      title: params.title,
      description: params.description,
      children: params.children,
      labels: params.labels || { cancel: '取消', confirm: '确认' },
      onActionButtonA: params.onCancel || (() => modalStore.getState().onClose()),
      onActionButtonB: params.onConfirm || (() => modalStore.getState().onClose()),
    });
  },
};

步骤2：确保Modal组件正常订阅状态 #

你的ModalComponent仍然使用useModal Hook获取状态，确保组件能响应store变化：

// components\shadcnui\modal.tsx
import { useModal } from '../path-to-your-zustand-store';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';

export default function ModalComponent() {
  const { isOpen, title, description, children, labels, footer, onActionButtonA, onActionButtonB, onClose } = useModal();

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>{description}</DialogDescription>
        </DialogHeader>
        {children}
        <DialogFooter>
          {footer || (
            <>
              <button onClick={onActionButtonA}>{labels.cancel}</button>
              <button onClick={onActionButtonB}>{labels.confirm}</button>
            </>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

步骤3：全局调用Modal（仿Mantine风格） #

现在你可以在任何组件甚至非组件文件中直接导入modals对象调用，无需使用Hook：

import { Button } from '@/components/ui/button';
import { modals } from '../path-to-your-zustand-store';
import { toast } from '@/components/ui/toast';

function ImageList({ value, onChange }) {
  const handleDelete = (name: string) => {
    modals.openConfirmModal({
      title: '请确认操作',
      description: '你确定要删除这张图片吗？',
      labels: { cancel: '取消', confirm: '确认' },
      onConfirm: () => {
        const result = value.filter(data => data.name !== name);
        onChange(result);
        toast.success('图片删除成功');
      },
    });
  };

  return (
    <Button onClick={() => handleDelete('example-image')}>删除图片</Button>
  );
}

关键说明 #

• 直接调用modalStore.getState()可获取当前状态和方法，无需依赖React上下文，适合全局调用场景
• 封装的modals对象可根据业务需求扩展更多快捷方法（如openAlertModal、openPromptModal）
• Modal组件仍通过Hook订阅状态，确保UI实时响应store变化

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