给react中的动态数组元素一个图标

我有一个动态数量的数组，例如[1,2,3,5,7], [1,2,3], [2,7,8]...其中元素代表平台 ID，有助于唯一识别 PlayStation、Xbox 等平台...

I want to link a react-icon https://react-icons.github.io/react-icons to each element of the array such that each symbol gets linked to the id of the platform it represents, for eg: if platform id of playstation is 2 i want <FaPlaystation/> icon linked to it so that i can display it in my react card component, basically something like this:

我如何在反应中实现这个？我通过一个名为 plat 的道具获取平台 ID，如下所示进行迭代：

let platMain = plat.map(plat=>plat.platform.id);

我得到了 ids 数组

您可以创建一个Map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map（不要与Array.prototype.map() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map）稍后用于通过提供的数字键查找关联的图标组件。

import { FaAndroid, FaAngular, FaReact, FaDev } from "react-icons/fa";

const map1 = new Map([
  [1, FaAndroid],
  [2, FaAngular],
  [3, FaReact],
  [4, FaDev]
]);

const platMain = [2, 3, 4, 5, 6, 7];

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {platMain.map((key) => {
        const icon = map1.get(key);
        return icon ? icon() : null;
      })}
    </div>
  );
}

或者与带有数字键的普通旧对象类似。

import { FaAndroid, FaAngular, FaReact, FaDev } from "react-icons/fa";

const map = {
  1: FaAndroid,
  2: FaAngular,
  3: FaReact,
  4: FaDev
};

const platMain = [2, 3, 4, 5, 6, 7];

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {platMain.map((key) => {
        const icon = map[key];
        return icon ? icon() : null;
      })}
    </div>
  );
}