ReactJS中如何通过嵌套循环展示数组中的数组图片？

1. 重构数据结构 #

先把分散的TIP1、TIP2这类数组整合成带分组标识的嵌套数组，既能统一管理，也方便后续扩展：

// 导入所有需要的图片
import tip1Img1 from './assets/tip1-1.jpg';
import tip1Img2 from './assets/tip1-2.jpg';
import tip2Img1 from './assets/tip2-1.jpg';
import tip2Img2 from './assets/tip2-2.jpg';

// 构建嵌套数组，每个元素对应一个图片分组
const TIPS = [
  {
    groupTitle: 'TIP1',
    images: [tip1Img1, tip1Img2]
  },
  {
    groupTitle: 'TIP2',
    images: [tip2Img1, tip2Img2]
  }
];

如果不需要分组标题，也可以用纯二维数组：const TIPS = [[tip1Img1, tip1Img2], [tip2Img1, tip2Img2]]，但带标识的结构可读性和扩展性更强。

2. 组件内实现嵌套循环 + Modal控制 #

用useState管理Modal的显示状态和当前选中的图片，通过两层map实现嵌套循环渲染，彻底消除重复代码：

import { useState } from 'react';

function ImageGallery() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [currentImg, setCurrentImg] = useState(null);

  // 点击图片打开Modal并记录当前图片
  const openModal = (img) => {
    setCurrentImg(img);
    setIsModalOpen(true);
  };

  // 关闭Modal
  const closeModal = () => {
    setIsModalOpen(false);
    setCurrentImg(null);
  };

  return (
    <div className="gallery-wrap">
      {/* 外层循环遍历分组，内层循环遍历分组内的图片 */}
      {TIPS.map((group, groupIdx) => (
        <section key={groupIdx} className="tip-group">
          <h3>{group.groupTitle}</h3>
          <div className="image-list">
            {group.images.map((img, imgIdx) => (
              <img
                key={`${groupIdx}-${imgIdx}`}
                src={img}
                alt={`${group.groupTitle}-${imgIdx}`}
                onClick={() => openModal(img)}
                className="gallery-img"
              />
            ))}
          </div>
        </section>
      ))}

      {/* 弹窗组件 */}
      {isModalOpen && (
        <div className="modal-overlay" onClick={closeModal}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <button className="modal-close" onClick={closeModal}>×</button>
            <img src={currentImg} alt="放大预览" className="modal-img" />
          </div>
        </div>
      )}
    </div>
  );
}

export default ImageGallery;

3. 关键细节说明 #

• Key的设置：内层循环用${groupIdx}-${imgIdx}作为key，避免不同分组内图片key重复，保证React渲染的稳定性。
• 扩展性：新增图片分组时，只需在TIPS数组里添加新的分组对象，无需修改渲染逻辑。
• 交互优化：点击遮罩层关闭Modal，点击弹窗内容区域阻止事件冒泡，避免误关弹窗。

基础样式参考（可选） #

添加以下CSS让布局更合理：

.gallery-wrap {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.tip-group {
  margin-bottom: 30px;
}

.image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.gallery-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.2s;
}

.gallery-img:hover {
  transform: scale(1.05);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  position: relative;
}

.modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  background: transparent;
  border: none;
  font-size: 32px;
  cursor: pointer;
}

.modal-img {
  max-width: 90%;
  max-height: 90vh;
  border-radius: 8px;
}

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