为 SELECT (REACTJS) 中的选项 TAG 动态使用 ENUMS

Question

我有如下所列的枚举

export declare enum UserStatus {
    NEW = "NEW",
    REGISTERED = "REGISTERED"
}

我如何确保我可以使用这种动态方式作为选择标签的下拉项。我在网上搜索了几个网站，没有找到合适的答案。有人可以帮忙吗？

目前我正在以这种方式进行硬编码。

<select value={selectedUserStatus} onChange={onUserStatusSelect}>
      <option
        aria-selected="true"
        key={UserStatus.NEW}
        value={UserStatus.NEW}
      >
        {UserStatus.NEW}
      </option>
      <option
        aria-selected="true"
        key={UserStatus.REGISTERED}
        value={UserStatus.REGISTERED}
      >
        {UserStatus.REGISTERED}
      </option>
    </select>

Answer 1

你也可以使用：

<select value={selectedUserStatus} onChange={onUserStatusSelect}>
    Object.values(UserStatus).map(value =>
        <option
            aria-selected="true"
            key={value]}
            value={value}
        >
            {value}
        </option>
    )
</select>

Answer 2

如果是 JSX 语法，您应该能够将元素内部的标记替换为 JSX 元素数组，如下所示：

<select value={selectedUserStatus} onChange={onUserStatusSelect}>
    Object.keys(UserStatus).map(key => (
        <option
            aria-selected="true"
            key={UserStatus[key]}
            value={UserStatus[key]}
        >
            {UserStatus[key]}
        </option>
        )
    )
</select>