当前位置：首页 > React

react枚举的实现

2026-01-27 08:55:43React

React 枚举的实现方式

在 React 中实现枚举（Enum）可以通过多种方式，以下是几种常见的方法：

使用 JavaScript 对象模拟枚举

JavaScript 本身没有枚举类型，但可以通过对象模拟枚举：

const Status = {
  PENDING: 'PENDING',
  APPROVED: 'APPROVED',
  REJECTED: 'REJECTED'
};

function Component() {
  const [status, setStatus] = useState(Status.PENDING);

  return (
    <div>
      Current status: {status}
    </div>
  );
}

使用 TypeScript 枚举

如果项目使用 TypeScript，可以直接使用内置的枚举类型：

enum Status {
  PENDING = 'PENDING',
  APPROVED = 'APPROVED',
  REJECTED = 'REJECTED'
}

const Component: React.FC = () => {
  const [status, setStatus] = useState<Status>(Status.PENDING);

  return (
    <div>
      Current status: {status}
    </div>
  );
};

使用常量文件集中管理

将枚举值集中管理在一个单独的文件中：

// constants/enums.js
export const UserRoles = {
  ADMIN: 'admin',
  USER: 'user',
  GUEST: 'guest'
};

// 组件中使用
import { UserRoles } from './constants/enums';

function UserProfile({ role }) {
  return (
    <div>
      {role === UserRoles.ADMIN && <AdminPanel />}
    </div>
  );
}

使用联合类型（TypeScript）

在 TypeScript 中，可以使用联合类型来限制变量的取值范围：

type Status = 'PENDING' | 'APPROVED' | 'REJECTED';

interface Props {
  status: Status;
}

const StatusIndicator: React.FC<Props> = ({ status }) => {
  return <div>{status}</div>;
};

使用 Map 结构存储枚举值

对于需要额外元数据的枚举，可以使用 Map：

react枚举的实现

const ColorEnum = new Map([
  ['RED', { hex: '#FF0000', name: 'Red' }],
  ['GREEN', { hex: '#00FF00', name: 'Green' }]
]);

function ColorDisplay({ colorKey }) {
  const color = ColorEnum.get(colorKey);
  return <div style={{ backgroundColor: color.hex }}>{color.name}</div>;
}

每种方法各有优缺点，选择取决于项目需求和技术栈。对象模拟枚举简单易用，TypeScript 枚举提供更好的类型安全，常量文件便于集中管理，联合类型适合简单场景，Map 结构适合需要关联数据的复杂枚举。

标签: react