如何在NextUI中为动态图片列表自动创建useDisclosure并打开Modal

不用给每张图片单独创建useDisclosure，只需要一个全局的useDisclosure控制Modal的显示/隐藏，再用一个状态变量记录当前选中的图片即可，完美适配长度可变的图片列表。

实现步骤与代码示例 #

1. 导入依赖

import { useState } from 'react';
import { useDisclosure, Modal, ModalContent, ModalHeader, ModalBody, Image, Card, CardBody } from '@nextui-org/react';

2. 定义图片列表（示例）

const imageGallery = [
  { id: 1, thumb: '/images/thumb-1.jpg', original: '/images/original-1.jpg', alt: '风景图1' },
  { id: 2, thumb: '/images/thumb-2.jpg', original: '/images/original-2.jpg', alt: '风景图2' },
  // 可动态添加更多图片项
];

3. 核心组件实现

export default function DynamicImagePreview() {
  // 单个useDisclosure控制Modal的显示状态
  const { isOpen, onOpen, onClose } = useDisclosure();
  // 状态变量记录当前选中的图片
  const [currentImage, setCurrentImage] = useState<typeof imageGallery[0] | null>(null);

  // 点击缩略图时的处理逻辑
  const handleThumbnailClick = (image: typeof imageGallery[0]) => {
    setCurrentImage(image);
    onOpen(); // 打开Modal
  };

  return (
    <>
      {/* 缩略图网格 */}
      <div className="grid grid-cols-4 gap-3 p-4">
        {imageGallery.map((img) => (
          <Card 
            key={img.id} 
            onClick={() => handleThumbnailClick(img)} 
            cursor="pointer"
            className="overflow-hidden"
          >
            <CardBody className="p-0">
              <Image
                src={img.thumb}
                alt={img.alt}
                width="100%"
                height="160px"
                objectFit="cover"
              />
            </CardBody>
          </Card>
        ))}
      </div>

      {/* 预览Modal */}
      <Modal 
        isOpen={isOpen} 
        onClose={onClose} 
        size="2xl"
        placement="center"
      >
        <ModalContent>
          <ModalHeader className="flex justify-between">
            <span>{currentImage?.alt || '图片预览'}</span>
          </ModalHeader>
          <ModalBody className="p-0">
            {currentImage && (
              <Image
                src={currentImage.original}
                alt={currentImage.alt}
                width="100%"
                height="auto"
                objectFit="contain"
              />
            )}
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
}

方案优势 #

• 高效简洁：仅需一个useDisclosure，无论图片列表长度如何变化都无需修改核心逻辑
• 易维护：状态集中管理，避免重复代码和冗余钩子
• 扩展性强：可轻松添加图片加载状态、缩放功能等额外需求

注意事项 #

• 确保每个图片项有唯一的key（如示例中的id），避免React渲染警告
• 根据实际需求调整Modal的尺寸、布局和样式
• 若图片来自外部链接，可添加loading="lazy"优化加载性能

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