誰能提供幫助？我需要用普通演算法撰寫所有內容，而不是現在這樣。我有三個要素。我想做到這一點，以便當我在最后一個元素上時，下一個按鈕將我帶回第一個元素。制作無限回圈旋轉木馬。反應專案
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>
);
}
我嘗試使用陣列方法，但沒有奏效。
uj5u.com熱心網友回復：
代碼不完整，所以我無法告訴您需要做的確切更改，但是這里有一個建議串列，我可以看到您的代碼缺少或錯誤。
永遠不要直接使用 React 操作 dom。
- 修改
classlist函式中的 in 不是 React 的方式，并且很容易出錯，因為如果觸發了重新渲染，它將被清除。而是直接在 html 中更改類。 - 會是這樣的
<div className={"item " active===0?'active':''} >
- 修改
您
const arr_items = []直接在 useEffect 上方宣告。這個變數將在每次渲染時被清除。還有其他方法可以在 React 中保留資訊，但是在這種情況下，保留 dom 元素陣列是沒有意義的。您
useEffect沒有依賴項（作為第二個引數發送的陣列）。這使得它在每次組件運行時都會執行，因此在useEffect這里使用 a 沒有意義。（順便說一句，你根本不需要它來作業）最后，“反應”方式（至少一種方法）將是具有活動元素索引的狀態。您只需使用相應的設定器更改此索引并有條件地呈現每個元素的類。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/532361.html
上一篇：集合的最大子集數
下一篇：C -撰寫排序函式的問題