So laden Sie bei jedem Laden von React zufällige Symbole

Question

Gibt es in React eine Möglichkeit, jedes Mal, wenn die Seite neu geladen wird, zufällig ein neues Symbol zu laden? Ich möchte eine Liste mit Symbolen haben und jedes Mal, wenn die Seite geladen wird, zufällig eines auswählen.

In manifest.json wird das Symbol wie folgt geladen:

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

Gibt es eine vernünftige Möglichkeit, ein Symbol zufällig aus einer Reihe von Symbolen auszuwählen?

Answer 1

您可以创建一个图标数组，并使用 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 属性来更新图标。