[英]React dynamic Icon usage
I have a list of objects, for them i have imported react icons as alias of list names separately, but when providing as list name in icon place, icon is not rendering我有一个对象列表,对于它们,我已经分别导入了反应图标作为列表名称的别名,但是当在图标位置作为列表名称提供时,图标不会呈现
For Example: import { BiSearchAlt2,BiCurrentLocation,BiBlanket as Blanket, BiCctv as Cctv,} from "react-icons/bi";例如: import { BiSearchAlt2,BiCurrentLocation,BiBlanket as Blanket, BiCctv as Cctv,} from "react-icons/bi";
const defaultExtras = [Cctv, BiCctv ]
{defaultExtras.map((Eachextra) => (
<div key={Eachextra} className="createBusBodyEachStopContainer">
<Chip
color="info"
onDelete={() => handleRemoveExtras(Eachextra)}
label={Eachextra}
deleteIcon={<IoClose />}
icon={Eachextra}
/>
</div>
))}
so in the icon prop "Eachextra" is icon alias name as imported, but when i am providing Cctv or BiCctv icon is rendering所以在图标道具“Eachextra”中是导入的图标别名,但是当我提供 Cctv 或 BiCctv 图标正在呈现
First is defaultExtras array of strings like const defaultExtras = ["Cctv", "BiCctv"];首先是 defaultExtras 字符串数组,例如 const defaultExtras = ["Cctv", "BiCctv"];
Second what is Chip component expecting for the icon property, string or React element?其次,Chip 组件对图标属性、字符串或 React 元素的期望是什么?
Consider using typescript it will help a lot with such issues of different expected types.考虑使用 typescript 它将有助于解决不同预期类型的此类问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.