如何使用react js创建js函数或钩子，选择点击的图片作为电子商务产品页面的新商品图片

Question

我为产品页面编写了以下代码，我无法创建函数并混淆是否使用钩子或简单的脚本

import React from 'react'
import Prod from '../assets/image-product-1-thumbnail.jpg'
import Cart from '../assets/icon-cart.svg'
import Prod2 from '../assets/image-product-2-thumbnail.jpg'
import Prod3 from '../assets/image-product-3-thumbnail.jpg'
import Prod4 from '../assets/image-product-4-thumbnail.jpg'

const Hero = () => {
return (
<div className='w-full py-[10rem] px-10 bg-white'>
<div className='max-w-[1240px] ml-[300px] grid md:grid-cols-2 gap-10'>
<img className='h-[520px] w-[100] rounded-lg bg-cover ' src={Prod2} alt="/" />
<div className=' flex-col mt-[50px] ml-[60px]' >
<p className='text-orange-500 text-lg text-bold font-bold'>SNEAKER COMPANY</p>
<h1 className=' flex flex-col  text-4xl font-bold' >Fall Limited Edition Sneakers</h1>
<p className=' flex flex-col  text-gray-800' >These low-profile sneakers are your perfect casual wear companion. Featuring a durable rubber outer sole, they’ll withstand everything the weather can offer. </p>
<button className=' ml-4 flex items-center justify-center gap-2 bg-orange-300 hover:bg-orange-500 text-[white] w-[500px] rounded-xl font-large my-6 mx-auto px-10 py-5'><a > <img className='text-white' src={Cart} alt='cart'/> </a>ADD TO CART</button>
</div>   
<div className='max-w-[1240px] ml-0 gap-8 grid grid-cols-4'>
<img className=' rounded-lg bg-cover ' src={Prod} alt="/" />
<img className=' rounded-lg bg-cover ' src={Prod3} alt="/" />
<img className=' rounded-lg bg-cover ' src={Prod4} alt="/" />
</div>
</div>
</div>
);
};
export default Hero;

如果您运行此代码片段，您将看到一个产品页面，其中包含产品的几张图像。我想做的是，当用户单击该产品的任何其他照片时，该照片需要显示为新图片以供参考https://yasertarek.github.io/ecommerce-product-page/index.html只是指南或解释概念或任何链接,对于我自己我想做这个

Answer 1

这是一个如何使用useState()钩子实现它的工作示例链接到下面代码的工作演示给出一个默认的活动图像源，并将每个缩略图图像的src值传递给onClick()中的setActiveImage('src here')，这应该导致重新渲染，并且活动图像被您点击的图像所取代，因为它的src值是activeImage。我还附上了样式，你可以看一下。

import {useState} from 'react';
const ModalDemo = () => {
const [activeImage, setActiveImage] = useState('https://i.picsum.photos/id/1016/3844/2563.jpg?hmac=WEryKFRvTdeae2aUrY-DHscSmZuyYI9jd_-p94stBvc');

return (
<div className="slider-container">
<div className="slider__active-photo">
<img src={activeImage} alt="active-image" className="active" />
</div>
<div className="slider__thumbnails">
<img onClick={() => setActiveImage('https://i.picsum.photos/id/1014/6016/4000.jpg?hmac=yMXsznFliL_Y2E2M-qZEsOZE1micNu8TwgNlHj7kzs8')} src="https://i.picsum.photos/id/1014/6016/4000.jpg?hmac=yMXsznFliL_Y2E2M-qZEsOZE1micNu8TwgNlHj7kzs8" alt="" className="thumbnail" />
<img onClick={() => setActiveImage('https://i.picsum.photos/id/1015/6000/4000.jpg?hmac=aHjb0fRa1t14DTIEBcoC12c5rAXOSwnVlaA5ujxPQ0I')} src="https://i.picsum.photos/id/1015/6000/4000.jpg?hmac=aHjb0fRa1t14DTIEBcoC12c5rAXOSwnVlaA5ujxPQ0I" alt="" className="thumbnail" />
<img onClick={() => setActiveImage('https://i.picsum.photos/id/1018/3914/2935.jpg?hmac=3N43cQcvTE8NItexePvXvYBrAoGbRssNMpuvuWlwMKg')} src="https://i.picsum.photos/id/1018/3914/2935.jpg?hmac=3N43cQcvTE8NItexePvXvYBrAoGbRssNMpuvuWlwMKg" alt="" className="thumbnail" />
</div>
</div>
);
};
export default ModalDemo;

.slider-container {
color: white;
width: 600px;
margin: auto;
margin-top: 100px;
}
.slider-container img {
width: 100%;
border-radius: 10px;
}
.slider__thumbnails {
width: 600px;
display: flex;
height: 100px;
overflow: auto;
justify-content: space-between;
margin-top: 20px;
}
.slider__thumbnails img {
width: auto;
cursor: pointer;
}