Question

我正在尝试在React中严格键入Button组件。

我如何期望具有特定字符串值的道具？

我当前的尝试导致 Type '"primary"' is not assignable to type 'ButtonLevel'

enum ButtonLevel {
  Primary = "primary",
  Secondary = "secondary",
  Warning = "warning"
}

interface IButtonProps {
  level: ButtonLevel,
  disabled?: boolean
}

function MyButton(props: IButtonProps) {
  return (<Button>ABC</Button>)
}

function test() {
  return (<MyButton level="primary" ></MyButton>)
}

Answer 1

好吧...只需输入要分隔的值

interface IButtonProps {
  level: "primary" | "secondary" | "warning",
  disabled?: boolean
}

function test() {
  return (<CertsyButton level="ad" disabled >Continue</CertsyButton>)
}

然后警告组件使用方该值无效。

Answer 2

使用枚举时，您将通过ButtonLevel.Primary而不是“ primary”传递，枚举的要点应严格键入并防止输入错误。

使用打字稿枚举并做出反应以期望字符串prop

2 个答案: