搜尋

首頁  >  問答  >  主體

如何在每次加載 React 時加載隨機圖標

有沒有辦法在 React 中每次重新載入頁面時隨機載入一個新的圖示?我想要一個圖標列表,並在每次加載頁面時隨機選擇一個圖標。

manifest.json 中,圖示載入如下所示:

"icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],

是否有任何合理的方法可以從一組圖示中隨機選擇一個圖示?

P粉237647645P粉237647645447 天前734

全部回覆(1)我來回復

  • P粉722521204

    P粉7225212042023-09-10 11:35:32

    您可以建立一個圖示數組,並使用 JavaScript 的 Math.random() 函數從陣列中隨機選擇圖示。參考這裡:

    import React, { useEffect } from 'react';
    
    const icons = [
      'favicon1.ico',
      'favicon2.ico',
      'favicon3.ico',
      // add more icons here
    ];
    
    function App() {
      useEffect(() => {
        const randomIcon = icons[Math.floor(Math.random() * icons.length)];
        const link = document.querySelector("link[rel~='icon']");
        link.href = randomIcon;
      }, []);
    
      return (
        <div>
          {/* your app content */}
        </div>
      );
    }
    
    export default App;

    在上面的範例中,useEffect鉤子是在元件安裝時執行一些程式碼。我們使用 Math.random() 從圖示陣列中選擇一個隨機圖標,並透過更改標籤的 href 屬性來更新圖標。

    回覆
    0
  • 取消回覆