我有一个动态数量的数组，如[1,2,3,5,7], [1,2,3], [2,7,8]... 其中元素代表一个平台 ID，它有助于唯一地识别 PlayStation、Xbox 等平台...
我想将一个react-icon链接到数组的每个元素，以便每个符号都链接到它所代表的平台的 id，例如：如果 playstation 的平台 id 是2我想要<FaPlaystation/>链接到它的图标，以便我可以显示它在我的react卡组件中，基本上是这样的：
我如何在react中实现这一点？我通过一个名为 plat 的props获取平台 ID，像这样迭代它：
let platMain = plat.map(plat=>plat.platform.id);
我得到了 id 数组
您可以创建一个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>
);
}
你可以这样做
// utility to get Icon
const getPlatformIcon = (platformId) => {
switch (platformId) {
case 1:
return <FaIconName />
case 2:
return <FaPlaystation/>
case 3:
return <FaAnotherIconName />
default:
return <FaDefaultIcon /> // or return null if you don't have it
}
}
// your component
export default function({plat}) {
return (
<div>
{
plat.map(p => getPlatformIcon(p.platform.id))
}
</div>
)
}
我认为这种方法会更好：
const yourArray = [
{id: 2, icon: <FaPlaystation /> },
{id: 4, icon: <AnotherIcon />},
{id: 6, icon: <AnotherIcon />}
]
//then
{yourArray.map((item)=>(
<div>
<p>item.id</p>
{item.icon}
</div>
))}