我正在構建一個影像滑塊，如果用戶在 5 秒后不使用它，就會改變影像。當 5 秒過去時，顯示錯誤。感謝您的幫助
import React, { useRef, useState } from 'react'
從“../assests/before.svg”匯入 BeforeIcon 從“../assests/next.svg”匯入 NextIcon
從“../assests/banner1.jpg”匯入Banner1 從“../assests/banner2.jpg”匯入Banner2
匯入“../styles/banner.css”
匯出默認函式 Banner() {
const ImgContainer = useRef()
const [position, setposition] = useState(0)
const w = window.innerWidth
const handleNext = () => {
let newposition = position 1
let move = w*newposition
setposition(newposition)
return(
ImgContainer.current.style.transform = "translateX(-" move "px)",
ImgContainer.current.style.transition = "transform, 1s",
console.log(move),
setposition(position 1)
)
}
const handleBefore = () => {
let newposition = position-1
let move = w*newposition
setposition(newposition)
return(
ImgContainer.current.style.transform = "translateX(-" move "px)",
ImgContainer.current.style.transition = "transform, 1s",
console.log(ImgContainer.current.style)
)
}
setTimeout(() => {
if (position===0){
handleNext()
}
else {
return(
console.log("slide")
)
}
}, 5000);
return (
<section>
<button onClick={handleBefore}><img src={BeforeIcon} alt="" className="button rigth"/></button>
<div ref={ImgContainer} className="imgcontainer">
<img src={Banner2} alt="" className="bannerimg"/>
<img src={Banner2} alt="" className="bannerimg"/>
<img src={Banner2} alt="" className="bannerimg"/>
<img src={Banner2} alt="" className="bannerimg"/>
<img src={Banner1} alt="" className="bannerimg"/>
<img src={Banner1} alt="" className="bannerimg"/>
<img src={Banner1} alt="" className="bannerimg"/>
</div>
<button onClick={handleNext}><img src={NextIcon} alt="" className="button left"/></button>
</section>
)
}
uj5u.com熱心網友回復：
setTimeout 在 React 組件中表現不佳。我建議看一下Josh Comeau 的這篇文章，他對 setTimeout 的解釋和解決方法比我能提供的要好得多。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/349439.html
標籤：javascript 反应