使用类型化的 props 将非类型字符串传递给 React 组件时出现 TypeScript 错误?

Question

>我有一个图标组件：

type Props = {
icon:
| "one"
| "two";
}
const Icon: React.FC<Props> = ({ icon }) => {
// generate icon
}

如果我在另一个具有硬编码值的组件中使用它，一切都很好：

const MyComponent = () => {
return(
<div>
<Icon icon="one" />
</div>
)
} 

但是，当它从 props 动态设置时，即使图标显示正确，我也会收到 TypeScript 错误：

type Props = {
icon?: string;
};
const MyComponent: React.FC<Props> = ({ icon }) => {
return(
<div>
{
icon && <Icon icon={icon} />
}
</div>
)
} 

TS2322：类型"字符串"不可分配给类型"一"|"二"。

index.tsx(8， 3(：预期类型来自属性"icon"，该属性在此处声明为类型"IntrinsicAttributes & Props & { children？： ReactNode; }">

这是因为 TypeScript 不知道传递的字符串值是"一"还是"二"？

如果是这样，那么我能想到的唯一解决方案是导出"一"和"二"作为枚举。但是，这将使组件使用起来很烦人，因为您始终必须导入此枚举，而不仅仅是传递所需的字符串。有没有更优雅的解决方案？

Answer 1

组件中的 props 只有一个或两个联合值，但在您使用组件的地方，其数据类型由可选的字符串变量定义，因此不匹配

type Props = {
icon:
| "one"
| "two";
}

type Props = {
icon?: string;
};

要修复它，您需要使两者保持一致

type Props = {
icon?: "one"|"two";
};