React无限循环轮播组件开发求助：实现首尾循环切换逻辑

你的现有实现存在核心问题：直接操作DOM导致逻辑耦合、硬编码轮播项判断无法扩展、未处理最后一项切换回第一项的循环逻辑，且useEffect无依赖项会重复执行。以下是符合React状态驱动理念的优化实现：

修改后的完整代码 #

import React, { useState } from "react";
import { factory_img, factory_bg_svg } from "@/img_video";

export default function Factory_Video() {
    // 定义轮播数据（可扩展更多项）
    const slides = [factory_img, factory_img, factory_img];
    // 用状态管理当前活跃轮播项的索引
    const [currentIndex, setCurrentIndex] = useState(0);

    function next_slide() {
        // 取模运算实现无限循环：最后一项后回到第一项
        setCurrentIndex((prevIndex) => (prevIndex + 1) % slides.length);
    }

    function prev_slide() {
        // 处理上一页的循环逻辑：第一项前回到最后一项
        setCurrentIndex((prevIndex) => 
            prevIndex === 0 ? slides.length - 1 : prevIndex - 1
        );
    }

    return (
        <section className="section_factory">
            <img id="bg_section_factory" src={factory_bg_svg} alt="背景图" />

            <div className="container_factory">
                <h1 className="h1_section_title">О производстве <br /> Венарус</h1>

                <div className="wrapper">
                    <div className="window">
                        {slides.map((img, index) => (
                            <div 
                                key={index}
                                className={`item ${index === currentIndex ? "active" : "transform"}`}
                            >
                                <img src={img} alt={`轮播图${index + 1}`} />
                            </div>
                        ))}
                    </div>
                    <div className="navigation">
                        <div onClick={prev_slide} className="btn_prev"></div>
                        <div onClick={next_slide} className="btn_next"></div>
                    </div>
                </div>
            </div>
        </section>
    );
}

关键优化点说明 #

• 状态驱动替代DOM操作：用currentIndex状态跟踪活跃项，通过条件渲染自动添加/移除类名，彻底避免直接操作DOM的耦合问题。
• 通用循环逻辑：
  • 下一页：(prevIndex + 1) % slides.length，当索引到达最后一项时，取模结果自动回到0
  • 上一页：判断当前是否为第一项，是则跳转到最后一项，否则索引减1
• 可扩展性：只需在slides数组中添加新的图片路径，轮播逻辑无需修改，自动适配任意数量的轮播项
• 修复原代码问题：移除了无意义的useEffectDOM查询，修复了原代码中多余的闭合括号语法错误

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