TypeScript枚举的运用实例

最新推荐文章于 2024-06-20 08:00:47 发布

吃瓜群众欢乐多

最新推荐文章于 2024-06-20 08:00:47 发布

阅读量619

点赞数

分类专栏： React ant.design

本文链接：https://blog.csdn.net/sinat_36146776/article/details/112025063

版权

React 同时被 2 个专栏收录

43 篇文章 3 订阅

订阅专栏

ant.design

27 篇文章 1 订阅

订阅专栏

原来的写法

//0:未提交,1待复核,2:已通过,3:已驳回
import { Tag } from "antd";
import React from "react";

//0:未提交,1待复核,2:已通过,3:已驳回
export default ({status}) => {
  switch ( status ) {
    case 0:
      return <Tag color="#108ee9">未提交</Tag>;
    case 1:
      return <Tag color="#2db7f5">待复核</Tag>;
    case 2:
      return <Tag color="#87d068">已通过</Tag>;
    case 3:
    default:
      return <Tag color="#f50">已驳回</Tag>;
  }
}

运用枚举改进

//0:未提交,1待复核,2:已通过,3:已驳回
import { Tag } from "antd";
import React from "react";

enum Status {total = -1, unSubmit = 0, waitCheck = 1, passed = 2, rejected = 3}

//0:未提交,1待复核,2:已通过,3:已驳回
export default ({status}) => {
  switch ( status ) {
    case Status.unSubmit:
      return <Tag color="#108ee9">未提交</Tag>;
    case Status.waitCheck:
      return <Tag color="#2db7f5">待复核</Tag>;
    case Status.passed:
      return <Tag color="#87d068">已通过</Tag>;
    case Status.rejected:
    default:
      return <Tag color="#f50">已驳回</Tag>;
  }
}