React-在地图函数中生成不同的图标

如何解决React-在地图函数中生成不同的图标

我有一个侧边栏组件，其列表项是在map函数（从api获取的电影类型）内部生成的。我想在每个电影流派旁边都有一个不同的图标，但一直想不出一种方法来为每次运行map函数创建不同的图标。

我的想法是 第一：按我要显示的顺序排列要显示的图标。

 const icons = [
    "AIoUtlineHome ","FaUserNinja","GiSwordman","GiBabyFace","FaLaughBeam","GiPistolGun","GiPineTree","GiDramaMasks","GiFamilyHouse","GiElfEar","GiScrollUnfurled","GiScreaming","GiMusicalNotes","GiMagnifyingGlass","faregKissBeam","GiMaterialsScience","GiHalfDead","GiGreatWarTank","GiCowboyBoot",];

然后在我的地图功能中为每个列表项生成一个不同的图标

{movieGenres.map((genre) => {
            return (
              <li key={genre.id} className="nav-text">
                <button
                  className="genre-btn"
                  onClick={() => genreSelectionHandler(genre.id)}
                >
                  *<GENERATE ICON HERE />*
                  <span className="nav-item-title">{genre.name}</span>
                </button>
              </li>
            );
          })}

有可能实用地创建这样的组件吗？这样一来，如果我要使用其他图标，就可以避免分别创建每个列表项。

解决方法

您只需获取类型的索引即可获得图标。索引是map()函数回调的第二个参数：

{movieGenres.map((genre,idx) => (
    <li key={genre.id} className="nav-text">
        <button
            className="genre-btn"
            onClick={() => genreSelectionHandler(genre.id)}
        >
            <Icon icon={icons[idx]} />
            <span className="nav-item-title">{genre.name}</span>
        </button>
    </li>
))}

Icon组件将根据您使用的图标类型来呈现图标。

编辑：

要使用react-icons，您需要导入实际的图标组件，而不仅仅是使用字符串：

import {AiOutlineHome} from "react-icons/ai";
import {FaUserNinja} from "react-icons/fa";
// ....

const icons = [
    AiOutlineHome,FaUserNinja,// ...
];

并渲染它们：

{movieGenres.map((genre,idx) => {
    // must be a capitalized name in order for react to treat it as a component
    const Icon = icons[idx];

    return (
        <li key={genre.id} className="nav-text">
            <button
                className="genre-btn"
                onClick={() => genreSelectionHandler(genre.id)}
            >
                <Icon />
                <span className="nav-item-title">{genre.name}</span>
            </button>
        </li>
    )
})}