滑块轮播 JS，反应答案

【问题标题】：Slider Carousel JS, React滑块轮播 JS，反应
【发布时间】：2022-11-12 16:08:37
【问题描述】：

谁能提供帮助？我需要用普通算法编写所有内容，而不是现在这样。我有三个要素。我想做到这一点，以便当我在最后一个元素上时，下一个按钮将我带回第一个元素。制作无限循环旋转木马。反应项目

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')
    }


}


            <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 onClick={prev_slide} className="btn_prev" ></div>
                    <div onClick={next_slide} className="btn_next" ></div>
                </div>
            </div>

我尝试使用数组方法，但没有奏效。

【问题讨论】：

请绝不在此站点上发布代码图片。它使其中的代码无法搜索，并使其他人无法复制您的问题并为您提供帮助，因为没有人会花时间输入图片中的所有内容。
您能否添加完整的组件以查看是否还有其他内容？这不是使用 react 的正确方法，它看起来更像 jQuery 代码。使用完整的组件，我可以帮助列出明显误解反应风格的问题

标签： javascript reactjs algorithm react-hooks

【解决方案1】：

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

永远不要直接使用 React 操作 dom。
- 在函数中修改 classlist 不是 React 的方式，并且容易出错，因为如果触发重新渲染，它将被清除。而是直接在 html 中更改类。
- 类似于<div className={"item " +active===0?'active':''} >
您在 useEffect 上方直接声明 const arr_items = []。这个变量将在每次渲染时被清除。还有其他方法可以在 React 中保留信息，但是在这种情况下，保留 dom 元素数组是没有意义的。
您的 useEffect 没有依赖项（作为第二个参数发送的数组）。这使得它在每次组件运行时都会执行，因此在这里使用useEffect 是没有意义的。（顺便说一句，你根本不需要它来工作）
最后，“反应”方式（至少一种方法）将是具有活动元素索引的状态。您只需使用相应的设置器更改此索引并有条件地呈现每个元素的类。

【讨论】：