时间戳

首页 > 解决方案 > 将非类型化字符串传递给带有类型化道具的 React 组件时出现 TypeScript 错误？

reactjs - 将非类型化字符串传递给带有类型化道具的 React 组件时出现 TypeScript 错误？

问题描述

我有一个图标组件：

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

const Icon: React.FC<Props> = ({ icon }) => {
    // generate icon
}

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

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

但是，当它从道具动态设置时，即使图标显示正确，我也会收到 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 不知道传递的字符串值是“一”还是“二”？

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

标签： reactjstypescript

解决方案

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

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


type Props = {
    icon?: string;
};

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

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

推荐阅读