文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在反应中映射反应图标

问如何在反应中映射反应图标
EN

Stack Overflow用户

提问于 2022-07-20 05:56:18

回答 2查看 322关注 0票数 0

我有上面的图标导入

import { MdSettings } from "react-icons/md";
import { RiAccountPinCircleFill } from "react-icons/ri";
import { BsSunFill } from "react-icons/bs";

下面是包含导入的数组

const Icons = ["MdSettings", "RiAccountPinCircleFill", "BsSunFill"];

我想在这里绘制地图

<div className="topbar-links inline-flex">
        <ul>*this is where I want it rendered*</ul>
</div>

reactjs

回答 2

Stack Overflow用户

发布于 2022-07-20 06:03:51

首先，如果变量不是组件，则应避免使用PascalCase作为名称。因此您可以将Icons重命名为icons。

然后，您应该将直接导入的元素存储在数组中，而不仅仅是将它们的名称作为字符串存储，否则您将无法使用组件：

const icons = [MdSettings, RiAccountPinCircleFill, BsSunFill];

最后，对于循环，您可以这样做：

<div className="topbar-links inline-flex">
   <ul>
      {icons.map((Icon, i) => (
         <li key={i}>
            <Icon />
         </li>
      ))}
   </ul>
</div>

票数 2

Stack Overflow用户

发布于 2022-07-20 06:09:37

如果图标是反应性组件，则可以将图标存储为

const Icons = [<MdSettings/>, <RiAccountPinCircleFill/>, <BsSunFill/>]

然后你就可以把它们映射成

<div className="topbar-links inline-flex">
        <ul>{Icons.map((icon, index) => <li key={index}>{icon}</li>}</ul>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73046582

复制

相似问题

问如何在反应中映射反应图标
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在反应中映射反应图标EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在反应中映射反应图标
EN