图片画廊

  {selectedImage && (
    <div className="modal" onClick={handleCloseModal}>
      <div className="modal-content">
        <img src={selectedImage.url} alt={selectedImage.title} />
        <div className="image-info">
          <h2>{selectedImage.title}</h2>
          <p>{selectedImage.description}</p>
        </div>
      </div>
    </div>
  )}
</div>

);
}

export default App;

样式设计

为了使我们的图片画廊和放大效果看起来更专业，我们需要添加一些CSS样式：

css
/* App.css */
.App {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.image-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}

.image-item {
cursor: pointer;
transition: transform 0.3s ease;
}

.image-item:hover {
transform: scale(1.05);
}

.thumbnail {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

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

.modal-content {
max-width: 80%;
max-height: 80%;
display: flex;
flex-direction: column;
background: white;
padding: 20px;
border-radius: 8px;
}

.modal-content img {
width: 100%;
height: auto;
max-height: 70vh;
object-fit: contain;
}

.image-info {
margin-top: 15px;
text-align: center;
}

功能扩展

1. 添加动画效果

我们可以使用CSS动画或React动画库（如react-transition-group）来为模态框添加平滑的过渡效果：

css
.modal {
/* 其他样式保持不变 */
opacity: 0;
transition: opacity 0.3s ease;
}

.modal.active {
opacity: 1;
}

然后修改JSX部分：

jsx <div className={`modal ${selectedImage ? 'active' : ''}`} onClick={handleCloseModal}>

2. 键盘导航

为了更好的可访问性，我们可以添加键盘事件监听：

jsx
useEffect(() => {
const handleKeyDown = (e) => {
if (e.key === 'Escape' && selectedImage) {
handleCloseModal();
}
};

window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, [selectedImage]);

3. 图片浏览功能

添加"上一张"和"下一张"按钮，让用户可以在放大模式下浏览所有图片：

jsx
const handlePrev = () => {
const currentIndex = images.findIndex(img => img.id === selectedImage.id);
const prevIndex = (currentIndex - 1 + images.length) % images.length;
setSelectedImage(images[prevIndex]);
};

const handleNext = () => {
const currentIndex = images.findIndex(img => img.id === selectedImage.id);
const nextIndex = (currentIndex + 1) % images.length;
setSelectedImage(images[nextIndex]);
};

// 在modal-content中添加导航按钮

e.stopPropagation()}>

{selectedImage.title}

{selectedImage.description}

上一张下一张关闭

性能优化

1. 图片懒加载

对于包含大量图片的画廊，我们可以实现懒加载：

jsx <img src={image.url} alt={image.title} onClick={() => handleImageClick(image)} className="thumbnail" loading="lazy" />

2. 预加载大图

当用户点击缩略图时，可以预加载大图版本：

jsx const handleImageClick = (image) => { const largeImage = new Image(); largeImage.src = image.largeUrl || image.url; largeImage.onload = () => { setSelectedImage(image); }; };

实际应用中的考虑

1. 响应式设计：确保图片画廊在不同屏幕尺寸上都能良好显示
2. 错误处理：添加图片加载失败时的占位符或错误处理
3. SEO优化：为图片添加适当的alt文本和结构化数据
4. 性能监控：监控图片加载时间，确保良好的用户体验

总结

通过使用React.js的map()函数和状态管理，我们实现了一个功能完善的图片画廊，支持点击放大查看细节。这种方法不仅代码结构清晰，而且易于维护和扩展。你可以根据项目需求进一步定制功能，如添加图片分类、搜索功能或社交分享按钮等。