如何使用 Typescript 在 React 中将枚举数转换为字符串？

Question

我的枚举看起来像这样：

export enum OrderType {
  ORDER_TYPE_UNSPECIFIED = 0,
  ASAP = 1
  SCHEDULED = 2
  CATERING = 4,
  UNRECOGNIZED = -1,
}

下面我已经有一个 function orderTypeToJSON：

export function orderTypeToJSON(object: OrderType): string {
  switch (object) {
    case OrderType.ORDER_TYPE_UNSPECIFIED:
      return 'ORDER_TYPE_UNSPECIFIED';
    case OrderType.ASAP:
      return 'ASAP';
    case OrderType.SCHEDULED:
      return 'SCHEDULED';
    case OrderType.CATERING:
      return 'CATERING';
    default:
      return 'UNKNOWN';
  }
}

在 OrderList 组件 I map 中通过订单（3 个具有相应 OrderTypes 的订单：OrderType.ASAP、OrderType.SCHEDULED、OrderType.CATERING）并为每个订单返回 OrderCard：

 {orderList.map(order => (
          <OrderCard
            key={order.orderId}
            customerName={order.customer?.name}
            orderType={order.type}
            batchId={order.batchId}
            batchedOrderTitle="BATCHED"
            groupId={order.groupId}
            groupedOrderTitle="GROUPED"
            address={order.address}
            driverName={order.assignedDriverId}
          />
        ))}

在浏览器中它显示 1、2 或 4。相反，我需要将“ASAP”显示为字符串（如果是 1），如果是 2 则显示“SCHEDULED”，如果是 4 则显示“CATERING”。

注意：我不允许触摸枚举或以某种方式改变它。

我试过在 OrderCard 中使用条件渲染，例如：

{OrderType.ASAP && <p>ASAP</p>}
{OrderType.SCHEDULED && <p>SCHEDULED</p>}
{OrderType.CATERING && <p>CATERING</p>}

当我这样做时，它会覆盖所有订单并仅显示所有 3 个订单的“尽快”。

以下逻辑也不起作用：

{OrderType.ASAP ? (
          <p>ASAP</p>
        ) : OrderType.SCHEDULED ? (
          <p>SCHEDULED</p>
        ) : (
          <p>CATERING</p>
        )}

我假设我需要使用 function orderTypeToJSON 但我不知道将它放在哪里（在父组件 OrderList 或子 OrderCard 中）以及如何在渲染方法中应用它以便它显示字符串 'ASAP'、'SCHEDULED' 和 'CATERING '.

任何建议表示赞赏。

Answer 1

使用 map：

let orderTypeToNameMap = {
   OrderType.ASAP: "ASAP",
   OrderType.SCHEDULED: "Scheduled",
   OrderType.CATERING: "Catering"
};

然后当你想访问名称时：

<p>{orderTypeToNameMap[order.type]}</p>

有道理？

Answer 2

只需按如下方式编写您的枚举值： OrderType[OrderType.ASAP] 。 它是 typescript 的一个特征。这是一个例子：

import React from 'react';
import { ButtonCounter } from './components/ButtonCounter';

enum OrderType {
  ORDER_TYPE_UNSPECIFIED = 0,
  ASAP = 1,
  SCHEDULED = 2,
  CATERING = 4,
  UNRECOGNIZED = -1,
}

export const App = () => {
  return <div>{OrderType[OrderType.ASAP]}</div>;
};

这将ASAP显示为字符串。

Answer 3

您可以像这样在 order.type 上运行order.type ：

{orderList.map(order => (
          <OrderCard
            key={order.orderId}
            customerName={order.customer?.name}
            orderType={orderTypeToJSON(order.type)}  // here
            batchId={order.batchId}
            batchedOrderTitle="BATCHED"
            groupId={order.groupId}
            groupedOrderTitle="GROUPED"
            address={order.address}
            driverName={order.assignedDriverId}
          />
        ))}

在这里看看 ts-playground