当前位置：首页 > React

react实现图库功能

2026-01-26 23:48:48React

实现React图库功能

使用React构建图库功能需要结合状态管理、组件化和图片展示逻辑。以下是实现方法：

基础组件结构

创建Gallery组件作为容器，内部包含ImageList和ImageModal等子组件：

import { useState } from 'react';

function Gallery({ images }) {
  const [selectedImage, setSelectedImage] = useState(null);

  return (
    <div className="gallery-container">
      <ImageList 
        images={images}
        onSelect={setSelectedImage}
      />
      {selectedImage && (
        <ImageModal 
          image={selectedImage}
          onClose={() => setSelectedImage(null)}
        />
      )}
    </div>
  );
}

图片列表实现

ImageList组件负责展示缩略图网格：

function ImageList({ images, onSelect }) {
  return (
    <div className="image-grid">
      {images.map((img) => (
        <div 
          key={img.id} 
          className="thumbnail"
          onClick={() => onSelect(img)}
        >
          <img 
            src={img.thumbnailUrl} 
            alt={img.title}
            loading="lazy"
          />
        </div>
      ))}
    </div>
  );
}

模态窗口实现

点击缩略图后展示大图的模态窗口：

function ImageModal({ image, onClose }) {
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        <button className="close-btn" onClick={onClose}>×</button>
        <img src={image.fullSizeUrl} alt={image.title} />
        <div className="image-meta">
          <h3>{image.title}</h3>
          <p>{image.description}</p>
        </div>
      </div>
    </div>
  );
}

懒加载优化

使用Intersection Observer实现图片懒加载：

import { useRef, useEffect } from 'react';

function LazyImage({ src, alt }) {
  const imgRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          observer.unobserve(img);
        }
      });
    });

    observer.observe(imgRef.current);

    return () => observer.disconnect();
  }, []);

  return <img ref={imgRef} data-src={src} alt={alt} />;
}

样式处理

使用CSS Grid布局创建响应式图库：

.gallery-container {
  max-width: 1200px;
  margin: 0 auto;
}

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

.thumbnail {
  cursor: pointer;
  transition: transform 0.3s;
}

.thumbnail:hover {
  transform: scale(1.03);
}

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

.modal-content {
  max-width: 90%;
  max-height: 90%;
  position: relative;
}

.close-btn {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

高级功能扩展

实现分页加载和图片分类：

function GalleryWithPagination() {
  const [page, setPage] = useState(1);
  const [category, setCategory] = useState('all');
  const [images, setImages] = useState([]);

  useEffect(() => {
    fetchImages(page, category).then(data => {
      setImages(prev => [...prev, ...data]);
    });
  }, [page, category]);

  return (
    <div>
      <CategoryFilter 
        categories={CATEGORIES}
        currentCategory={category}
        onChange={setCategory}
      />
      <Gallery images={images} />
      <button onClick={() => setPage(p => p + 1)}>
        Load More
      </button>
    </div>
  );
}

性能优化建议

使用React.memo避免不必要的重新渲染：

const ImageItem = React.memo(function ImageItem({ image, onSelect }) {
  return (
    <div className="thumbnail" onClick={() => onSelect(image)}>
      <LazyImage src={image.thumbnailUrl} alt={image.title} />
    </div>
  );
});

考虑使用第三方库如react-photo-gallery或react-image-gallery快速实现高级图库功能。

react实现图库功能