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 berikut: "ikon":[{"src":"favicon.ico","sizes":"64x6432x3224x2416x16",&quo

P粉722521204 · Answer

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 (
    
      {/* your app content */}
    
  );
}

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.