如何在反应/打字稿中使用枚举作为道具

Question

我有以下枚举

export enum Sizes{
    Small,
    Large
}

在我的<Demo/>组件的props接口中正在使用：

export interface IProps{
    Label?: string;
    Size: SizeEnum;
}

我的问题是，何时使用此功能<Demo Size={how do i define size here?} />？

Answer 1

您可以像在任何其他上下文中一样引用枚举值：

export enum Sizes{
    Small,
    Large
}

export interface IProps{
    Label?: string;
    Size: Sizes;
}

class Demo extends React.Component<IProps> {}

let d = <Demo Size={Sizes.Large} />

Answer 2

使用type或as const

enum在打字稿中使用被认为是一种糟糕且不可靠的做法。双方type并as const具有自动填充和当使用无效的值会抱怨。

类型

type MyEnum = 'up' | 'down' | 'left' | 'right'

Use:
'up'

interface IProps {
    Size: MyEnum
}

作为常量

const MyEnum = {
    Up: 'up',
    Down: 'down',
    Left: 'left',
    Right: 'right',
} as const

type MyEnum = typeof MyEnum[keyof typeof MyEnum]

Use:
MyEnum.Up

interface IProps {
    Size: MyEnum // string, without line `type MyEnum =...`
}

有关as const和冻结参数的更多详细信息