如何使用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; }