如何使用 React Helmet 每隔幾秒在圖標之間切換一次？

Question

該按鈕用於將警報 useState 從 true 更改為 false。 目前，網站圖標在 true 時為橙色，在 false 時為灰色。 當警報 useState 設置為 true 時，我希望圖標從橙色閃爍到灰色。 我怎么會go這個呢？

import orangeLogo from './src/images/orange-logo.svg'
import grayLogo from './src/images/gray-logo.svg'

const wrapPageElement = ({ element, props }) => {
  const [alert, setAlert] = useState(true)

  return (
    <>
      <Helmet>
        <link rel='icon' type='image' href={alert ? orangeLogo : grayLogo}/>
      </Helmet>
      <Layout {...props}><button onClick={() => setAlert(!alert)}>ALERT</button></Layout> 
    </>
  )
}
export { wrapPageElement }

我最初的想法是只制作一個 gif，但顯然這並沒有取得成果，因為 firefox 是唯一似乎支持動畫圖標的瀏覽器？

我現在的想法是有人使用 setInterval 之類的東西在 SVG 之間切換，但我對 React 還是很陌生，還沒有弄清楚如何實現它。

Answer 1

您可以使用 setInterval 像這樣每 5 秒切換一次警報 state。

useEffect(() => {
  const interval = setInterval(() => {
    setAlert(!alert);
  }, 5000);
  return () => clearInterval(interval);
}, [alert]);