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

Question

有沒有辦法在React中每次重新載入頁面時隨機載入一個新的圖示？我想要一個圖標列表，並在每次加載頁面時隨機選擇一個圖標。在manifest.json中，圖示載入如下所示："icons":[{"src":"favicon.ico","sizes":"64x6432x3224x2416x16",&quo

P粉722521204 · Answer

您可以建立一個圖示數組，並使用 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 (
    
      {/* your app content */}
    
  );
}

export default App;

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