反应组件道具抛出错误打字稿

Question

我正在尝试使用我已经定义了这样的 prop 类型的组件

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 属性出现此错误

类型“字符串”不可分配给类型“绿色”| “红” | “灰色” | "黄色"'.ts(2322)

types.d.ts(2, 5)：预期类型来自属性“variant”，该属性在此处声明为 type 'IntrinsicAttributes & TagProps & { children?: ReactNode; }'

（JSX 属性）变体：“绿色”| “红” | “灰色” | “黄色”

谁能帮我解决一下，谢谢

Answer 1

类型“字符串”不可分配给类型“绿色”| “红” | “灰色” | "黄色"'.ts(2322)

此错误意味着string 类型的任何字符串都不能分配给特定 字符串"green" | "red" | "grey" | "yellow" 的联合。这是有道理的。 "banana" 是 string，但它不应分配给 "apple" | "pear"。

要修复它，您需要告诉statusColor 的类型，它可能只有那些特定字符串之一的值。

因此，只需使映射类型的值与 Props 中的 variant 相同即可。

const statusColour: { [key: string]: Props['variant'] } = {
  running: "green",
  stopped: "red",
  idle: "grey",
  default: "green"
};

Playground

---

或者通过将变体联合设为自己的类型别名来清理它：

type MyVariant = "green" | "red" | "grey" | "yellow"

export type Props = {
  variant: MyVariant;
};

const statusColour: { [key: string]: MyVariant } = {
  running: "green",
  stopped: "red",
  idle: "grey",
  default: "green"
};

Playground

Answer 2

所以想通了我的错误。基本上，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} />

我知道这不是最好的解决方案。因此，如果有人可以发布更好的解决方案，那将非常有帮助。谢谢