Slider Carousel JS, React

Question

谁能帮忙?我需要用普通的算法来写所有东西，而不是像现在这样。我有三个元素。我想这样做，当我在最后一个元素上时，下一个按钮会把我带回到第一个元素。做一个无限循环的旋转木马。项目在react

import React, { useEffect, useState } from "react";
import { factory_img, factory_bg_svg } from "@/img_video";
export default function Factory_Video() {
const arr_items = []
useEffect(() => {
const items = document.querySelectorAll('.item')
for (let item of items) {
arr_items.push(item)
}
})

function next_slide() {

const el_1 = arr_items[0].classList.contains("active")
const el_2 = arr_items[1].classList.contains("active")

if (el_1) {
arr_items[0].classList.remove('active')
arr_items[0].classList.add("transform")
arr_items[1].classList.add("active")
arr_items[1].classList.remove('transform')
} else if (el_2) {
arr_items[1].classList.remove('active')
arr_items[1].classList.add("transform")
arr_items[2].classList.add("active")
arr_items[2].classList.remove('transform')
}

}

}
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">

<div className="item  active" >
<img src={factory_img} />
</div>
<div className="item  transform" >
<img src={factory_img} />
</div>
<div className="item  transform" >
<img src={factory_img} />
</div>

</div>
<div className="navigation" >
<div className="btn_prev" ></div>
<div onClick={next_slide} className="btn_next" ></div>
</div>
</div>
</div>
</section>
);
}

我尝试使用数组方法，但它不起作用。

Answer 1

代码不完整，所以我不能告诉你需要做的确切更改，但是这里有一个建议列表，我可以看到你的代码缺乏或错误。

• 永远不要用React直接操作dom。

  • 在函数中修改classlist不是React的方式，并且容易出错，因为如果触发重新渲染，它将被清除。直接在html中修改这些类。
  比如<div className={"item " +active===0?'active':''} >

你直接在useEffect上面声明const arr_items = []。这个变量将在每次渲染时被清除。在React中还有其他方法可以保留信息，但是在这种情况下，没有必要保留dom元素数组。

您的useEffect没有依赖关系(数组作为第二个参数发送)。这使得它在每次组件运行时都执行，因此在这里使用useEffect没有任何意义。(顺便说一句，你根本不需要它来工作)

最后是"反应"一种方法(至少是一种方法)是拥有带有活动元素索引的状态。您只需要使用相应的setter更改此索引，并有条件地呈现每个元素的类。