我正在嘗試在我的反應應用程式中制作幻燈片。我正在為幻燈片使用以下功能。
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("diabetes-day");
for (i = 0; i < x.length; i ) {
x[i].style.display = "none";
}
myIndex ;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 5000); // Change image every 5 seconds
}<div className="slideshow-container">
<div className="diabetes-news">
<img className="diabetes-day" src={DiabetesDay}/>
<img className="diabetes-day" src={Symptoms}/>
<img className="diabetes-day" src={Managing}/>
</div>
</div>當我運行代碼時，幻燈片可以正常作業。但是，一旦我重繪 頁面，頁面中的所有內容都會消失，并且我在控制臺中收到以下錯誤。
我不太確定為什么重繪 頁面后它會停止作業。如果有人可以指導我如何解決這個問題，那就太好了。
uj5u.com熱心網友回復：
看來你正在使用 reactjs，最好用這個來改變你的代碼：
const {useState, useEffect} = React;
const Example = () => {
const [imageIndex, setImageIndex] = useState(0);
// change these images with yours
const imagesSrc = [
"https://cdn.pixabay.com/photo/2022/03/03/11/19/nature-7045133_960_720.jpg",
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg",
"https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg",
];
const carousel = () => {
setImageIndex((prev) => (prev < 2 ? prev 1 : 0));
};
useEffect(() => {
const timer = setInterval(() => {
carousel();
}, 2000); // set the which timer you want
return () => {
clearInterval(timer);
};
}, []);
return (
<div className="slideshow-container">
<div className="diabetes-news">
<img className="diabetes-day" src={imagesSrc[imageIndex]} alt="" />
</div>
</div>
);
};
// Render it
ReactDOM.render(
<Example/>,
document.getElementById("react")
);.diabetes-day{
width: 200px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/475273.html
標籤：javascript html 反应
上一篇：游標轉換持續時間會產生輕微的滯后