Bagaimana untuk memuatkan ikon rawak setiap kali React dimuatkan

Question

Adakah terdapat cara dalam React untuk memuatkan ikon baharu secara rawak setiap kali halaman dimuat semula? Saya mahu mempunyai senarai ikon dan memilih satu secara rawak setiap kali halaman dimuatkan.

Dalam manifest.json ikon dimuatkan seperti ini:

"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"
    }
  ],

Adakah terdapat cara yang munasabah untuk memilih ikon secara rawak daripada set ikon?

Answer 1

Anda boleh membuat tatasusunan ikon dan menggunakan fungsi Math.random() JavaScript untuk memilih ikon secara rawak daripada tatasusunan. Rujukan di sini:

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;

Dalam contoh di atas, cangkuk useEffect adalah untuk menjalankan beberapa kod apabila komponen dipasang. Kami menggunakan Math.random() untuk memilih ikon rawak daripada tatasusunan ikon dan mengemas kini ikon dengan menukar atribut href label.