React - 防止孩子在地圖中重新渲染

Question

我有一個滑塊的重新渲染問題，它出現在地圖的每個元素中。

 const Attractions = () => { const [slide, setSlide] = useState(0) const handleSlider = (direction) => { if(direction === "right"){ setSlide(slide + 1) }else{ setSlide(slide - 1) } } const translation = slide * - 110 return ( <div className="attractions"> <Navbar /> <Header nav={"attractions"}/> <div className="attractionsContainer"> <div className="attractionsWrapper"> <div className="left"> </div> <div className="right"> {attractionList.map(attraction => ( <div className="attractionWrapper" key={attraction.id}> <div className="top"> <div className="topLeft"> <img src="https://holidaystoswitzerland.com/wp-content/uploads/2019/09/Lauterbrunnen.jpg.webp" alt="" className="avatarImg"/> </div> <div className="topRight"> <div className="title">{attraction.name}</div> <div className="location"><LocationOnOutlinedIcon/>{attraction.location.city}, {attraction.location.country}</div> </div> <div className="moreInfo"> <MoreVertOutlinedIcon/> </div> </div> <div className="middle"> <div className="sliderWrapper"> {slide > 0 && <div className="left" onClick={()=>handleSlider("left")}> <ArrowBackIosNewOutlinedIcon style={{fontSize: "30px"}}/> </div> } <div className="slider" style={{transform: `translateX(${translation}%)`}}> {attraction.img.map(img =>( <img src={img} alt="" /> ))} </div> {slide < 2 && <div className="right" onClick={()=>handleSlider("right")}> <ArrowForwardIosOutlinedIcon style={{fontSize: "30px"}}/> </div> } </div> </div> <div className="bottom"> <div className="interactions"> <FavoriteBorderOutlinedIcon className="actionBtn"/> <ChatBubbleOutlineOutlinedIcon className="actionBtn"/> <CheckCircleOutlineRoundedIcon className="actionBtn"/> <AddCircleOutlineOutlinedIcon className="actionBtn" /> </div> <div className="description"> {attraction.description} </div> <div className="comments"> {attraction.comments.map(comment =>( <div className="commentItem"> <h4>{comment.user}</h4> <span>{comment.comment}</span> </div> ))} </div> </div> </div> ))} </div> </div> </div> <Footer /> </div> ) }

當我從吸引力列表數組中獲取更多元素時，每當我單擊左箭頭或右箭頭轉到下一張幻燈片時，列表中的所有滑塊都會執行相同的操作。 我想我應該使用一些東西，以便僅根據地圖中的項目設置幻燈片，但老實說我不知道​​如何。

Answer 1

如果您希望它們表現不同，那么attraction對象應該有自己的slide variable和setSlide method 。 這樣你就可以放：

onclick = {() => attraction.setSlide(attraction.slide + 1)}