리액트/타이프스크립트의 소품으로 열거를 사용하는 방법

리액트/타이프스크립트의 소품으로 열거를 사용하는 방법

다음과 같은 것이 있습니다.

export enum Sizes{
    Small,
    Large
}

내 몸에 익숙해지고 있어<Demo/>컴포넌트의 소품 인터페이스:

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

궁금한 건 이걸 쓸 때<Demo Size={how do i define size here?} />?

enum 값은 다른 컨텍스트와 마찬가지로 참조할 수 있습니다.

export enum Sizes{
    Small,
    Large
}

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

class Demo extends React.Component<IProps> {}

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

사용하다type또는as const

둘다요.type그리고.as constauto-fill 이 설정되어 있어 비활성 값이 사용되면 불만을 제기합니다.

유형

'up'   

구현 대상:

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

interface IProps {
  Size: MyEnum
}

항상 그렇듯이

MyEnum.Up    

구현 대상:

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

type MyEnum = typeof MyEnum[keyof typeof MyEnum]

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

상세 정보as const및 freezing 파라미터

언급URL : https://stackoverflow.com/questions/49746638/how-to-use-enum-as-props-in-react-typescript