以下是我如何使用我Badge制作的可重用組件。它具有如下型別的道具，但這會產生某種錯誤：
這是完整的代碼，
const variantsMap = {
done: "success",
processing: "info",
suspened: "warning",
cancelled: "error",
};
interface ITransactionProps {
status: "done" | "processing" | "suspened" | "cancelled";
label: string;
}
const MyComponent = ({ status, label }: ITransactionProps) => {
return <Badge variant={variantsMap[status]}>{label}</Badge>;
};
interface IBadgeProps {
variant: "success" | "info" | "warning" | "error";
children: string;
}
const Badge = ({ variant, children }: IBadgeProps) => {
return <div className={`badge bordered circular ${variant}`}>{children}</div>;
};
如何以適當的方式解決這個問題？如果我們可以通過多種方式解決它，我想知道所有的方法。
uj5u.com熱心網友回復：
你可以宣告variantsMap有點不同
const variantsMap: Record<string, "success" | "info" | "warning" | "error"> = ...
為了便于閱讀，我會將其提取為一種新型別。
type Variant = "success" | "info" | "warning" | "error";
const variantsMap: Record<string, Variant> = ...
interface IBadgeProps {
variant: Variant;
children: string;
}
uj5u.com熱心網友回復：
一個簡單而干凈的解決方案是使用as const：
const variantsMap = {
done: "success",
processing: "info",
suspened: "warning",
cancelled: "error",
} as const;
現在variantsMap輸入為：
{
readonly done: "success";
// ...
}
這意味著訪問屬性會導致文字型別，而不是string導致錯誤的原因。
uj5u.com熱心網友回復：
這是一種方法：TypeScript Playground
完整的代碼如下所示：
import React from 'react';
type Variant = "done" | "processing" | "suspened" | "cancelled";
const variantsMap: Record<Variant, string> = {
done: "success",
processing: "info",
suspened: "warning",
cancelled: "error",
};
interface ITransactionProps {
status: Variant;
label: string;
}
const MyComponent = ({ status, label }: ITransactionProps) => {
return <Badge variant={variantsMap[status]}>{label}</Badge>;
};
interface IBadgeProps {
variant: string;
children: JSX.Element | string;
}
const Badge = ({ variant, children }: IBadgeProps) => {
return <div className={`badge bordered circular ${variant}`}>{children}</div>;
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/464692.html
標籤：javascript 反应 打字稿 反应式 类型
上一篇：useState的setFunction不會改變OnClick
下一篇：如何將陣列項添加到另一個陣列中