关于reactjs：从Typescript中的int获取特定的枚举成员

Get specific enum member from int in Typescript

这里有一个特定的例子，我有一个react按钮，它有一个枚举定义的类，该按钮通过switch语句选择正确的类，测试枚举的每个成员。这是硬编码的，这个组件工作正常(代码如下)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import * as React from 'react';
import './SquareButton.css';

export interface Props {
buttonType: ButtonType;
style?: object;
}

const SquareButton = ({ buttonType, style }: Props) => {

var className ="";
switch (buttonType) {
case ButtonType.Hamburger:
className ="zmdi zmdi-menu zmdi-hc-2x";
break;
case ButtonType.Clock:
className ="zmdi zmdi-time zmdi-hc-2x";
break;
case ButtonType.Wifi:
className ="zmdi zmdi-network-wifi zmdi-hc-2x";
break;
default:
break;
}

return (

<i className={className} />

)
}

export enum ButtonType {
Wifi,
Hamburger,
Clock
}

export default SquareButton;

我现在面临的问题是测试这个组件，因为这个EDOCX1[0]列表可能会增加，我希望能够循环通过每个按钮类型，而不必编写单独的测试，也不必在每次有新的按钮时添加新的测试。下面的示例测试。

1
2
3
4
5
6

for (var i = 0; i < Object.keys(ButtonType).length / 2; i++) {
test(ButtonType[i] + 'square button icon class must contain zmdi', () => {
const button = Enzyme.shallow(<SquareButton buttonType={i as ButtonType} />)
expect(button.find('div').find('i').hasClass("zmdi")).toEqual(true);
});
}

这成功地循环了枚举中的每个成员，但我不知道如何让循环中的特定枚举实例传递给组件。传递i as ButtonType仍然只传递一个int值，并点击开关中的默认值。我尝试过许多变体/字符串转换等，但没有尝试过任何工作(如果我硬编码一个(例如)ButtonType.Wifi值，测试就可以工作)。

如何从整数值中获取特定的枚举成员？

相关讨论

在这种情况下，i整数已经是所需的值，ButtonType.Hamburger === 0等。

遍历枚举的问题是，枚举值不一定是数字，而且不需要有一半的枚举键是数字索引。

1
2
3
4
5

enum A {
B,
C,
D = 'D'
}

结果如下：

1	["0","1","B","C","D"]

一种防故障的方法是：

1
2
3
4
5
6
7
8

for (const enumKey of Object.keys(ButtonType).filter(key => isNaN(+key))) {
const enumVal = ButtonType[enumKey] as ButtonType;

test(`ButtonType.${enumKey} square button icon class must contain zmdi`, () => {
const button = Enzyme.shallow(<SquareButton buttonType={enumVal} />)
...
})
}

由于最好也测试特定于ButtonType的类，如zmdi-menu，因此也应该有相应的测试，因此可能不需要进行带迭代的通用测试。