【业务组件优化】解耦合+映射，改观React业务组件代码例子

场景

我们有如下的业务场景：

一个很简单的Tag标签，标签有如下分类，每个代表打卡结果，其中迟到、早退、严重迟到为一个颜色，出差为一个颜色，缺卡、迟到旷工为一个颜色，请假为一个颜色；而正常的打卡结果又是只为单独的文字：

❌差的做法（不推荐）：

import React, { Component } from 'react'
import styles from './style.module.less'
import classnames from 'classnames'

/**
 * 考勤结果枚举
 * @type {
  {}}
 */
const Eum = {
  normal: '正常',
  normal_by_user: '正常（补）',
  normal_by_admin: '正常（调）',
  late: '迟到',
  serious_late: '严重迟到',
  absenteeism: '旷工迟到',
  leave_early: '早退',
  absence: '缺卡',
  ask_for_leave: '请假',
  official_leave: '公出',
  business_trip: '出差