如何利用Swiper属性结合Tailwind CSS实现条件样式切换？

你的代码存在以下几个问题导致无法正常运行：

• 未导入useState钩子，React组件中使用状态必须先导入
• useEffect缺少依赖数组，会导致组件渲染时无限执行回调
• 仅在初始化Swiper时获取一次isBeginning，没有监听轮播切换事件，无法实时更新状态

修正后的代码如下：

import { useState, useEffect } from 'react';    

function Component(){
  // 初始值设为true，因为默认加载后处于轮播起始位置
  const [slideBegin, setSlideBegin] = useState(true);
  const [swiper, setSwiper] = useState(null);

  useEffect(()=>{
    if(swiper){
      // 初始化时设置一次状态
      setSlideBegin(swiper.isBeginning);
      // 监听slideChange事件，实时更新isBeginning状态
      const handleSlideChange = () => {
        setSlideBegin(swiper.isBeginning);
      };
      swiper.on('slideChange', handleSlideChange);
      // 组件卸载时移除监听，避免内存泄漏
      return () => {
        swiper.off('slideChange', handleSlideChange);
      };
    }
  }, [swiper]) // 添加依赖数组，仅在swiper变化时执行

  return(
    <Swiper
      onSwiper={(swiperInstance) => setSwiper(swiperInstance)}
    >
      <svg className={`${slideBegin ? 'fill-[#ffc000]' : 'fill-red-600'}`}></svg>
      {/* 这里需要添加你的SwiperSlide内容 */}
    </Swiper>
  )
 }
export default Component

关键修改说明：

• 补充useState的导入，确保能正常使用状态钩子
• 给useEffect添加依赖数组[swiper]，避免无限循环
• 监听Swiper的slideChange事件，每次轮播切换时更新slideBegin状态
• 组件卸载时移除事件监听，防止内存泄漏
• 给slideBegin设置初始值true，保证初始样式正确

内容的提问来源于stack exchange，提问作者Patrick Traile