reactjs - 无法在 ionic-react 项目中创建动态 IonIcons

Question

我在我的项目中使用了许多组件，并且在所有这些组件中，每个组件都需要不同的 ionIcon。所以我创建了 Icon 组件。图标名称从每个父组件传递到 Icon 子组件。但它没有验证。

**

<Icon name="closeCircleOutline" /> \\ this is the parent component

图标组件

import { IonIcon, IonItem } from "@ionic/react";
 import * as iconName from "ionicons/icons";
export default function Icon(props: any) { 
var propsIcon = props.name; // icon name passed from parent component
return <IonIcon icon={iconName.propsIcon}></IonIcon>; 
}

 属性 'propsIcon' 不存在于类型 'typeof import("/Users/dubaitradeit/Desktop/Mobile Apps/Ionic/lastMile/node_modules/ionicons/icons/index")' 上面的警告我得到

Answer 1

我想你的意思是写下面的代码

return <IonIcon icon={iconName.props}></IonIcon>;

而不是引用“道具”，而是引用图标库中不存在的“propsIcon”。希望这可以纠正您的问题。