react多个图片如何循环

循环渲染多个图片的方法

在React中循环渲染多个图片通常使用map方法遍历图片数组，结合key属性优化渲染性能。以下是几种常见场景的实现方式：

使用静态图片数组

假设有一个图片路径数组，通过map直接渲染：

const imageList = [
  "image1.jpg",
  "image2.jpg",
  "image3.jpg"
];

function Gallery() {
  return (
    <div>
      {imageList.map((img, index) => (
        <img 
          key={index} 
          src={require(`./assets/${img}`)} 
          alt={`图片${index + 1}`}
        />
      ))}
    </div>
  );
}

动态加载网络图片

当图片URL来自API或动态数据时：

function DynamicImages({ urls }) {
  return (
    <div className="image-grid">
      {urls.map((url) => (
        <img 
          key={url} 
          src={url} 
          alt="内容图片"
          onError={(e) => e.target.style.display = 'none'}
        />
      ))}
    </div>
  );
}

结合状态管理

需要交互时（如点击切换图片）：

function InteractiveGallery() {
  const [images] = useState([
    { id: 1, url: "pic1.png", caption: "风景1" },
    { id: 2, url: "pic2.png", caption: "风景2" }
  ]);

  return (
    <div>
      {images.map(item => (
        <figure key={item.id}>
          <img src={item.url} alt={item.caption} />
          <figcaption>{item.caption}</figcaption>
        </figure>
      ))}
    </div>
  );
}

性能优化建议

对于大量图片加载：

• 使用lazy-loading属性延迟加载
• 考虑虚拟滚动技术（如react-window）
• 为动态URL添加错误处理
• 避免使用index作为key（除非列表完全静态）

样式布局示例

配合CSS Grid实现响应式布局：

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