ASP.NET Core+React项目中React组件枚举数值转字符串实现

嘿，针对你这个在React组件里把枚举数值转成对应字符串的需求，结合你的ASP.NET Core + React项目场景，我给你整理了几种实用的解决方法：

TypeScript的数字枚举默认会自动生成反向映射关系，也就是说不仅可以通过枚举名获取数值，还能通过数值反查对应的枚举字符串名称。直接用这个特性就能快速实现转换：

import { Waybill, WayBillType } from './your-models-path';

function WaybillInfo({ waybill }: { waybill: Waybill }) {
  // 直接通过枚举数值反向查找对应的字符串
  const typeText = WayBillType[waybill.wayBillType];

  return (
    <div className="waybill-item">
      <p>运单ID：{waybill.id}</p>
      <p>运单类型：{typeText}</p>
    </div>
  );
}

⚠️ 注意：

• 这个方法只适用于数字枚举，字符串枚举不会生成反向映射
• 你的场景里C#的Disposal=3对应TS的Outgoing=3，数值匹配，所以会转成"Outgoing"；如果想统一显示后端的"Disposal"，建议用下面的自定义映射方法。

如果需要自定义显示文本，或者前后端枚举名称不一致，这种方法更可控：

import { Waybill, WayBillType } from './your-models-path';

// 定义数值到显示文本的映射，完全自定义显示内容
const WayBillTypeMap: Record<WayBillType, string> = {
  [WayBillType.Moving]: '移库',
  [WayBillType.Incoming]: '入库',
  [WayBillType.Outgoing]: '处置', // 这里可以统一成后端的"Disposal"或者自定义中文文本
};

function WaybillInfo({ waybill }: { waybill: Waybill }) {
  const typeText = WayBillTypeMap[waybill.wayBillType];

  return (
    <div className="waybill-item">
      <p>运单ID：{waybill.id}</p>
      <p>运单类型：{typeText}</p>
    </div>
  );
}

这种方法的好处是：

• 可以自由修改显示文本，比如换成中文
• 即使前后端枚举名称不一致，也能精准映射
• 代码可读性更强，维护起来更方便

如果多个组件都需要用到这个转换逻辑，建议把它封装成工具函数，避免重复代码：

// utils/enum-helpers.ts
import { WayBillType } from '../models';

export function getWayBillTypeName(type: WayBillType): string {
  const typeMap: Record<WayBillType, string> = {
    [WayBillType.Moving]: 'Moving',
    [WayBillType.Incoming]: 'Incoming',
    [WayBillType.Outgoing]: 'Disposal',
  };
  // 处理未知枚举值的情况，避免显示undefined
  return typeMap[type] || 'Unknown Type';
}

然后在组件里调用：

import { Waybill } from './your-models-path';
import { getWayBillTypeName } from './utils/enum-helpers';

function WaybillInfo({ waybill }: { waybill: Waybill }) {
  const typeText = getWayBillTypeName(waybill.wayBillType);

  return (
    <div className="waybill-item">
      <p>运单ID：{waybill.id}</p>
      <p>运单类型：{typeText}</p>
    </div>
  );
}

额外提醒 #

一定要确保前后端的枚举数值完全一致，你的场景里C#和TS的枚举数值是匹配的（1=Moving、2=Incoming、3对应后端Disposal/前端Outgoing），所以转换不会有问题。如果数值不匹配，第一步要先对齐前后端的枚举数值，否则转换结果会出错。

内容的提问来源于stack exchange，提问作者Maksym Labutin