如何使用swipper属性进行更改以有条件地更改顺风css

Question

我正试图使用一个swipper属性来使用tailwind有条件地更改css；类似于下面的代码，但当然，它不起作用。我该如何着手完成这件事？提前谢谢。

import {useEffect} from 'react'    
function Component(){
const [slideBegin, setSlideBegin] = useState();
const [swiper, setSwiper] = useState();
useEffect(()=>{
if(swiper){
setSlideBegin(swiper.isBeginning)
}
})
return(
<Swiper
onSwiper={(swiper) => setSwiper(swiper)}
>
<svg className={`${slideBegin?'fill-[#ffc000]':'fill-red-600'}`}></svg>
</Swiper>
)
}
export default Component

Answer 1

我能够从swipper-rect文档中使用useSwiper钩子获得解决方案。我创建了一个组件，其中包含了我想根据swipper属性更改的元素(在这种情况下，我希望在上一个和下一个按钮组件中更新样式(，并使用事件函数来完成此操作。然后，将此组件导入到具有实际swipper包装的主组件中。

主要部件：

<Swiper>
<ButtonsComponent>
<Swiper/>

按钮组件内部会是什么样子：

import { useSwiper } from "swiper/react";
import { useRef } from "react";
import useIsomorphicLayoutEffect from "use-isomorphic-layout-effect";

const SwiperButtons = () => {
const swiper = useSwiper()
const prevEl = useRef()
const nextEl = useRef()
const prevFunc = ()=>{
swiper.slidePrev()
if(swiper.isBeginning==true && swiper.isEnd==false){
prevEl.current.querySelector('.rect').style.fill = 'none'
nextEl.current.querySelector('.rect').style.fill = '#FFC000'
}else if(swiper.isEnd==true && swiper.isBeginning==false){
nextEl.current.querySelector('.rect').style.fill = 'none'
prevEl.current.querySelector('.rect').style.fill = '#FFC000'
}else{
prevEl.current.querySelector('.rect').style.fill = '#FFC000'
nextEl.current.querySelector('.rect').style.fill = '#FFC000'
}
}
const nextFunc = ()=>{
swiper.slideNext()
if(swiper.isBeginning==true && swiper.isEnd==false){
prevEl.current.querySelector('.rect').style.fill = 'none'
nextEl.current.querySelector('.rect').style.fill = '#FFC000'
}else if(swiper.isEnd==true && swiper.isBeginning==false){
nextEl.current.querySelector('.rect').style.fill = 'none'
prevEl.current.querySelector('.rect').style.fill = '#FFC000'
}else{
prevEl.current.querySelector('.rect').style.fill = '#FFC000'
nextEl.current.querySelector('.rect').style.fill = '#FFC000'
}
}
useIsomorphicLayoutEffect(()=>{
if(swiper.isBeginning==true && swiper.isEnd==false){
prevEl.current.querySelector('.rect').style.fill = 'none'
nextEl.current.querySelector('.rect').style.fill = '#FFC000'
}else if(swiper.isEnd==true && swiper.isBeginning==false){
nextEl.current.querySelector('.rect').style.fill = 'none'
prevEl.current.querySelector('.rect').style.fill = '#FFC000'
}else{
prevEl.current.querySelector('.rect').style.fill = '#FFC000'
nextEl.current.querySelector('.rect').style.fill = '#FFC000'
}
}, [swiper])

return (
<div className='flex justify-between mb-6 ml-12 w-[calc(100vw*0.15)]'>
<button onClick={prevFunc}>
<svg ref={prevEl} <rect className="rect" x="2.88" y=".72" width="20.82" height="34.24"/></svg>
</button>
<button onClick={nextFunc}>
<svg ref={nextEl} <rect className="rect" x=".72" y=".72" width="20.82" height="34.24"/></svg>
</button>
</div>
)
};
export default SwiperButtons