为什么反作用中反作用图像放大不起作用

Question

我是react的新手，所以我正在尝试放大react中的图像。我使用swipper-js来显示产品图像，但对于缩放，我使用react图像放大，但它不起作用。react图像放大在slipper js外部工作，但在内部不工作。有什么解决办法吗？

<Swiper
navigation
loop={true}
thumbs={{ swiper: props.thumbsSwiper }}
>
{
productData.gallery.map((item, idx) =>
<SwiperSlide key={`image-slides-${idx}`}>
<div className="slide-item" key={`image-slides-${idx}`}>
<div className="slide-item__thumb">
<ReactImageMagnify {...{
smallImage: {
alt: 'Product Thumbnail',
isFluidWidth: true,
src: item.url,
className: "img-fluid",
},
largeImage: {
src: item.url,
width: 1200,
height: 1800,
},
enlargedImageContainerDimensions: {
width: '200%',
height: '100%'
}
}} />
{/*<img className="img-fluid" src={item.url} alt="Product Thumbnail" />*/}
</div>
</div>
</SwiperSlide>)
}
</Swiper>

Answer 1

import React, { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectFade, Autoplay, Thumbs } from "swiper/modules";
import ReactImageMagnify from "react-image-magnify";
import "swiper/css";
import "swiper/css/thumbs";
import Nature1 from "../assets/images/nature-1.jpg";
import Nature2 from "../assets/images/nature-2.jpg";
import Nature3 from "../assets/images/nature-3.jpg";
import Nature4 from "../assets/images/nature-4.jpg";
import Nature5 from "../assets/images/nature-5.jpg";
import Nature6 from "../assets/images/nature-6.jpg";
import Nature7 from "../assets/images/nature-7.jpg";
import Nature8 from "../assets/images/nature-8.jpg";
import Nature9 from "../assets/images/nature-9.jpg";
export default function Swip() {
const [thumbsSwiper, setThumbsSwiper] = useState(null);
const [swiperRef, setSwiperRef] = useState(null);
const slideTo = (index) => {
swiperRef.slideTo(index - 1, 0);
};
const handleAutoplay = (swiper) => {
swiper.autoplay.start();
};
return (
<>
<div className="cont">
<Swiper
onSwiper={setThumbsSwiper}
loop={true}
direction={"vertical"}
watchSlidesProgress={true}
spaceBetween={10}
slidesPerView={4}
modules={[Thumbs]}
className="mySwiper"
>
<SwiperSlide>
<img className="" src={Nature1} alt="page1" />
</SwiperSlide>
<SwiperSlide>
<img className="" src={Nature2} alt="page2" />
</SwiperSlide>
<SwiperSlide>
<img className="" src={Nature3} alt="page3" />
</SwiperSlide>
<SwiperSlide>
<img className="" src={Nature4} alt="page4" />
</SwiperSlide>
<SwiperSlide>
<img className="" src={Nature5} alt="page5" />
</SwiperSlide>
<SwiperSlide>
<img className="" src={Nature6} alt="page6" />
</SwiperSlide>
<SwiperSlide>
<img className="" src={Nature7} alt="page7" />
</SwiperSlide>
<SwiperSlide>
<img className="" src={Nature8} alt="page8" />
</SwiperSlide>
<SwiperSlide>
<img className="" src={Nature9} alt="page9" />
</SwiperSlide>
</Swiper>
<Swiper
onSwiper={setSwiperRef}
loop={true}
spaceBetween={10}
thumbs={{ swiper: thumbsSwiper }}
modules={[Thumbs, Autoplay, EffectFade]}
className="mySwiper2"
autoplay={{
delay: 1500,
pauseOnMouseEnter: true,
}}
// fadeEffect={{
//   crossFade: true,
// }}
// effect="fade"
onAutoplayStop={handleAutoplay}
>
<SwiperSlide>
<div className="zoom">
<ReactImageMagnify
{...{
smallImage: {
alt: "",
isFluidWidth: true,
src: Nature1,
},
largeImage: {
src: Nature1,
width: 1200,
height: 1800,
},
shouldUsePositiveSpaceLens: true,
isHintEnabled: true,
shouldHideHintAfterFirstActivation: false,
}}
/>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="zoom">
<ReactImageMagnify
style={{ opacity: ".2" }}
{...{
smallImage: {
alt: "",
isFluidWidth: true,
src: Nature2,
},
largeImage: {
src: Nature2,
width: 1200,
height: 1800,
},
}}
/>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="zoom">
<ReactImageMagnify
{...{
smallImage: {
alt: "",
isFluidWidth: true,
src: Nature3,
},
largeImage: {
src: Nature3,
width: 1200,
height: 1800,
},
}}
/>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="zoom">
<ReactImageMagnify
{...{
smallImage: {
alt: "",
isFluidWidth: true,
src: Nature4,
},
largeImage: {
src: Nature4,
width: 1200,
height: 1800,
},
}}
/>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="zoom">
<ReactImageMagnify
{...{
smallImage: {
alt: "",
isFluidWidth: true,
src: Nature5,
},
largeImage: {
src: Nature5,
width: 1200,
height: 1800,
},
}}
/>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="zoom">
<ReactImageMagnify
{...{
smallImage: {
alt: "",
isFluidWidth: true,
src: Nature6,
},
largeImage: {
src: Nature6,
width: 1200,
height: 1800,
},
}}
/>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="zoom">
<ReactImageMagnify
{...{
smallImage: {
alt: "",
isFluidWidth: true,
src: Nature7,
},
largeImage: {
src: Nature7,
width: 1200,
height: 1800,
},
}}
/>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="zoom">
<ReactImageMagnify
{...{
smallImage: {
alt: "",
isFluidWidth: true,
src: Nature8,
},
largeImage: {
src: Nature8,
width: 1200,
height: 1800,
},
}}
/>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="zoom">
<ReactImageMagnify
{...{
smallImage: {
alt: "",
isFluidWidth: true,
src: Nature9,
},
largeImage: {
src: Nature9,
width: 1200,
height: 1800,
},
}}
/>
</div>
</SwiperSlide>
</Swiper>
</div>
<p className="buttons">
<button onClick={() => slideTo(8)} className="slide">
Slide 8
</button>
<button onClick={() => slideTo(3)} className="slide">
Slide 3
</button>
</p>
</>
);
}

#root {
height: 100%;
}
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #eee;
background-size: cover;
background-position: center;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.mySwiper2 {
height: 100%;
width: 100%;
}
.mySwiper {
height: 100%;
width: 30%;
box-sizing: border-box;
padding: 10px 0;
.swiper-slide {
width: 100%;
height: 100%;
opacity: 0.3;
}
.swiper-slide-thumb-active {
opacity: 1;
}
}
.swiper-pagination {
bottom: 0 !important;
}
// cont
.cont {
max-width: 120rem;
margin: 0 auto;
height: 80%;
display: flex;
gap: 0 1rem;
}
.zoom {
width: 50%;
}
.buttons {
text-align: center;
}
.slide {
margin: 2rem;
}