reactjs - 如何根据数据库中的字符串呈现反应图标?
问题描述
我正在尝试创建多个包含信息的框,每个框都有一个图标。现在我已经硬编码如下:
<Box p={10} borderRadius='lg' bg={colorMode === 'light' ? 'gray.300' : 'gray.700'}>
<Stack spacing={5}>
<Box mt={5}>
<IconContext.Provider value={{size: '10vh'}}>
<div>
<IoLogoJavascript/>
</div>
</IconContext.Provider>
</Box>
<Box><Heading>JS & TS</Heading></Box>
<Progress size="lg" value={75} hasStripe isAnimated/>
</Stack>
</Box>
现在,为了能够动态添加更多这些组件,我想实现一个数据库。大多数情况下这很容易,我只是不知道如何使用 react-icons 组件来实现它?我应该使用其他东西还是有可能?
解决方案
您可以创建一个自定义组件,但您需要将它们全部导入。
这是一个带有fa
图标的示例:
import React from "react";
import "./styles.css";
import * as Icons from "react-icons/fa";
/* Your icon name from database data can now be passed as prop */
const DynamicFaIcon = ({ name }) => {
const IconComponent = Icons[name];
if (!IconComponent) { // Return a default one
return <Icons.FaBeer />;
}
return <IconComponent />;
};
export default function App() {
return (
<div className="App">
<DynamicFaIcon name="FaAngellist" />
<DynamicFaIcon />
</div>
);
}
推荐阅读
- javascript - 跟踪在特定网站上花费的时间:Chrome 扩展
- python-3.x - 你如何将多个圆圈放在一个网格中?
- php - Imagick 使用谷歌字体将 svg 转换为 png
- python - 如何手动填充 Django 模型数据以进行插入
- wordpress - 如何添加永久链接部分以在管理员中编辑自定义帖子类型的帖子页面
- npm - 检查 package.json 的 dependencies 部分中是否有任何范围版本的命令
- assembly - 汇编中的除法溢出(8086)
- html - 如何在 CSS 文件中放置范围、最小值、最大值和值
- hadoop - 如何修复 java.lang.IllegalArgumentException:无法识别的 Hadoop 主要版本号:3.1.0?
- c# - 在 Microsoft Azure App 服务中部署 asp.net webforms 应用程序后出现运行时错误