Ionic React项目中动态创建IonIcons失败问题咨询

我太懂你这个困扰了——想做个通用的Icon组件，让父组件传个图标名就能渲染，结果被TypeScript的类型检查拦下来了对吧？咱们一步步把它搞定：

1. 先搞清楚错误为啥出现 #

你现在写的iconName.propsIcon是硬点属性的写法，但propsIcon是个动态变量啊！TypeScript根本不知道这个变量对应的属性到底在iconName（也就是你导入的所有图标集合）里存不存在，所以直接给你抛了类型错误。正确的动态属性访问得用方括号语法：iconName[propsIcon]。

2. 给Props加上正确的类型约束 #

别再用any当Props类型了，这等于放弃了TypeScript的类型保护。咱们可以直接从ionicons导出图标的名称类型，让TypeScript帮咱们校验传入的图标名是不是合法的：

3. 修复后的完整代码 #

import { IonIcon } from "@ionic/react";
// 把图标集合重命名成Icons，看起来更清晰
import * as Icons from "ionicons/icons";

// 提取所有合法的图标名称类型
type IconName = keyof typeof Icons;

// 给组件Props定义明确的类型
export default function Icon({ name }: { name: IconName }) {
  // 用方括号语法访问动态图标
  return <IonIcon icon={Icons[name]} />;
}

4. 额外优化：支持更多IonIcon属性 #

如果想让你的Icon组件支持size、color这些IonIcon自带的属性，还可以扩展一下Props类型：

import { IonIcon, IonIconProps } from "@ionic/react";
import * as Icons from "ionicons/icons";

type IconName = keyof typeof Icons;

// 合并自定义的name属性和IonIcon的原生属性
interface IconProps extends IonIconProps {
  name: IconName;
}

export default function Icon({ name, ...rest }: IconProps) {
  return <IonIcon icon={Icons[name]} {...rest} />;
}

这样改完之后，不仅类型错误会消失，你在父组件传图标名的时候，TypeScript还会自动提示合法的图标名称，再也不用担心写错名字啦！

内容的提问来源于stack exchange，提问作者Eann