我正在嘗試使用一個組件，我在該組件上定義了這樣的道具型別
export type Props = {
variant: "green" | "red" | "grey" | "yellow";
};
組件是這樣的
const Tag: FC<Props> = (props) => {
const { variant, ...rest } = props;
return (
<div
{...rest}
sx={{
bg: variant,
}}
/>
);
};
現在當我嘗試像這樣使用這個組件時
const statusColour: { [key: string]: string } = {
running: "green",
stopped: "red",
idle: "grey",
default: "green"
};
const variant = statusColour[value]
? statusColour[value]
: statusColour["default"];
<Tag variant={variant} />
我在variant屬性上收到此錯誤
型別 'string' 不能分配給型別 '"green" | “紅色” | “灰色” | “黃色”'.ts(2322)
types.d.ts(2, 5)：預期的型別來自屬性“variant”，它在型別“IntrinsicAttributes & TagProps & { children?: ReactNode;”上宣告。}'
（JSX 屬性）變體：“綠色” | “紅色” | “灰色” | “黃色”
誰能幫我解決一下，謝謝
uj5u.com熱心網友回復：
型別 'string' 不能分配給型別 '"green" | “紅色” | “灰色” | “黃色”'.ts(2322)
此錯誤意味著任何型別的字串string都不能分配給特定字串的并集"green" | "red" | "grey" | "yellow"。這是有道理的。"banana"是string，但不應分配給"apple" | "pear"。
要修復它，您需要告訴它的型別statusColor，它可能只有這些特定字串之一的值。
因此，只需使映射型別的值與variantin相同Props。
const statusColour: { [key: string]: Props['variant'] } = {
running: "green",
stopped: "red",
idle: "grey",
default: "green"
};
操場
或者通過使變體聯合成為自己的型別別名來清理它：
type MyVariant = "green" | "red" | "grey" | "yellow"
export type Props = {
variant: MyVariant;
};
const statusColour: { [key: string]: MyVariant } = {
running: "green",
stopped: "red",
idle: "grey",
default: "green"
};
操場
uj5u.com熱心網友回復：
所以想通了我的錯誤。基本上，variant道具需要某種型別的東西，"green" | "red" | "grey" | "yellow";但我正在傳遞一個字串。為了解決它，這就是我所做的：
const statusColour: { [key: string]: string } = {
running: "green",
stopped: "red",
idle: "grey",
default: "green"
};
const variant = statusColour[value] as "green" | "red" | "grey" | "yellow"
<Tag variant={variant} />
我知道這不是最好的解決方案。因此，如果有人可以發布更好的解決方案，那將非常有幫助。謝謝
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/371414.html