有沒有辦法在 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粉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 屬性來更新圖標。