javascript - 给反应中的动态数组元素一个图标

Question

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

我想将react-icon链接到数组的每个元素，以便每个符号链接到它所代表的平台的 id，例如：如果 playstation 的平台 id 是2我想要<FaPlaystation/>链接到它的图标，以便我可以显示它在我的反应卡组件中，基本上是这样的：

我如何在反应中实现这一点？在像这样迭代它时，我通过一个名为 plat 的道具获取平台 ID：

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

我得到了 id 数组

标签： javascriptreactjs

Answer 1

您可以创建一个Map（不要与Array.prototype.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>
  );
}