每 10 秒刷新一个元素

Question

我有一个包含图像数组的组件，我需要它在 css 中完成 animation 后更改图像。trumpImage 组件从数组中选择随机图像，但仅在加载页面时执行一次。 所以我需要它来重新加载 div，这样图像就会在 animation 完成后发生变化。

export function Anibox() {   
    return (
            <div id="anibox">
                <span id="aniBall">{ trumpImage() }</span>
            </div>
    )
}

Answer 1

导出 function Anibox() { const [seconds, setSeconds] = useState(0);

useEffect(() => {
  const interval = setInterval(() => {
    setSeconds(seconds => seconds + 1);
  }, 10000);
  return () => clearInterval(interval);
}, []);

return (
    
        <div id="anibox"> { seconds }
            <span id="aniBall">{ trumpImage() }</span>
        </div>
)

}