react多个图片如何循环

在 React 中循环渲染多个图片

使用 map 方法循环渲染图片数组

假设有一个图片 URL 数组，可以通过 map 方法遍历数组并渲染每个图片。

import React from 'react';

function ImageGallery() {
  const images = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg'
  ];

  return (
    <div>
      {images.map((imageUrl, index) => (
        <img key={index} src={imageUrl} alt={`Image ${index}`} />
      ))}
    </div>
  );
}

export default ImageGallery;

动态加载本地图片

如果需要循环渲染本地图片，可以先将图片导入，再通过数组循环渲染。

import React from 'react';
import image1 from './images/image1.jpg';
import image2 from './images/image2.jpg';
import image3 from './images/image3.jpg';

function LocalImageGallery() {
  const localImages = [image1, image2, image3];

  return (
    <div>
      {localImages.map((image, index) => (
        <img key={index} src={image} alt={`Local Image ${index}`} />
      ))}
    </div>
  );
}

export default LocalImageGallery;

结合状态管理动态更新图片

使用 useState 管理图片数组，可以动态添加或删除图片。

import React, { useState } from 'react';

function DynamicImageGallery() {
  const [images, setImages] = useState([
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg'
  ]);

  const addImage = () => {
    setImages([...images, 'https://example.com/new-image.jpg']);
  };

  return (
    <div>
      {images.map((imageUrl, index) => (
        <img key={index} src={imageUrl} alt={`Image ${index}`} />
      ))}
      <button onClick={addImage}>Add Image</button>
    </div>
  );
}

export default DynamicImageGallery;

使用 require.context 批量导入图片

如果需要批量导入本地图片，可以使用 Webpack 的 require.context。

import React from 'react';

function BulkImageGallery() {
  const importAll = (r) => r.keys().map(r);
  const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));

  return (
    <div>
      {images.map((image, index) => (
        <img key={index} src={image} alt={`Bulk Image ${index}`} />
      ))}
    </div>
  );
}

export default BulkImageGallery;

结合 CSS 实现图片轮播

如果需要实现图片轮播效果，可以结合 CSS 和状态管理。

import React, { useState, useEffect } from 'react';
import './Carousel.css';

function ImageCarousel() {
  const images = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg'
  ];
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
    }, 3000);
    return () => clearInterval(interval);
  }, [images.length]);

  return (
    <div className="carousel">
      <img src={images[currentIndex]} alt={`Carousel Image ${currentIndex}`} />
    </div>
  );
}

export default ImageCarousel;

以上方法可以根据具体需求选择使用，灵活实现 React 中多个图片的循环渲染。