[英]How to change image and background color every x seconds. React
期望的結果 = 每 x 秒更改圖像和背景顏色。
我遇到的問題 = 它沒有顯示所有顏色和圖像。 它從粉色 -> 橙色 -> 粉色 -> 橙色,跳過藍色和綠色。
import * as React from 'react';
// Images
import heroPink from './hero-pink.png';
import heroBlue from './hero-blue.png';
import heroOrange from './hero-orange.png';
import heroGreen from './hero-green.png';
import logo from './oddballs_logo.svg';
const colors = [
"#F9B199",
"#237E95",
"#D79446",
"#C2C138"
];
const images = [
heroPink,
heroBlue,
heroOrange,
heroGreen
];
export default function App() {
const [value, setValue] = React.useState(0);
React.useEffect(() => {
const interval = setInterval(() => {
setValue((v) => (v === 3 ? 0 : v + 1));
}, 1000);
}, []);
return (
<div className="App" style={{ backgroundColor: colors[value] }}>
<img src={images[value]}/>
</div>
);
}
您需要使用 return 語句清除間隔。 這意味着,在每次卸載時,間隔將被清除,當該組件將被裝載時,新的間隔將被注冊。 它對我來說很好用,希望你的問題也能解決。
React.useEffect(() => {
const interval = setInterval(() => {
setValue((v) => {
return v === 4 ? 0 : v + 1;
});
}, 1000);
return () => clearInterval(interval);
}, []);
請記住,清除任何間隔事件很重要。 否則會發生 memory 泄漏。
這是完整的例子:
import React from "react";
const colors = ["#92c952", "#771796", "#24f355", "#d32776", "#f66b97"];
const images = [
"https://via.placeholder.com/150/92c952",
"https://via.placeholder.com/150/771796",
"https://via.placeholder.com/150/24f355",
"https://via.placeholder.com/150/d32776",
"https://via.placeholder.com/150/f66b97"
];
export default function App() {
const [value, setValue] = React.useState(0);
React.useEffect(() => {
const interval = setInterval(() => {
setValue((v) => {
return v === 4 ? 0 : v + 1;
});
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<div className="App" style={{ backgroundColor: colors[value] }}>
<img src={images[value]} alt="img" style={{ border: "3px solid" }} />
</div>
);
}
您可以使用setInterval
function 來實現該行為。 在這里,我為顏色和圖像索引使用了兩種狀態。
const colors = ["#eb4034", "#ebdb34", "#34eb37"];
const images = [
"https://images.unsplash.com/photo-1649894158666-c10421960f13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2071&q=50",
"https://images.unsplash.com/photo-1648737154448-ccf0cafae1c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80",
"https://images.unsplash.com/photo-1585974738771-84483dd9f89f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1072&q=80"
];
export default function App() {
const [image, setImage] = useState(0);
const [color, setColor] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
if (image === images.length - 1 && color === colors.length - 1) {
setImage(0);
setColor(0);
} else {
setImage(image + 1);
setColor(color + 1);
}
}, 3000);
return () => {
clearInterval(interval);
};
}, [image, color]);
return (
<div style={{ backgroundColor: `${colors[color]}`, padding: "20px" }}>
<img src={images[image]} style={{ width: "100%" }} alt="img" />
</div>
);
}
還要清理間隔卸載階段。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.