问题描述
我有一个侧边栏组件,其列表项是在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>
)
})}