在项目中我们经常会碰到数据字典翻译的情况，通常由后端接口返回数据字典的配置，但有的项目后端不提供此类接口，只提供对照表，由前端自行翻译，这样的后果就是当后端数据字典配置发生变更（增加、删除、修改）后，前端需要在各个业务页面重新修改数据字典相关代码，项目维护困难。

对于这种情况，前端应该自行实现数据字典翻译，当后端配置修改后，只需要修改配置文件相关代码即可，增加了代码的优雅性和可维护性。下方做了一个基于 React + TypeScript 的示例，提供一个思路。

一、创建配置文件

1.1、创建 src/config/dict.enum.ts

枚举配置文件，key 自定义命名，值与后端配置相同。

/**
 * 应用角色
 */
export enum EAppRole {
  personal = 1, // 个人
  enterprise, // 企业
  gov, // 政府
  provider, // 服务商
}

1.2、创建 src/config/dict.mapping.ts

数据字典映射文件，将枚举值跟翻译值一一对应。

import { EAppRole } from './dict.enum';

export interface IDict {
  value: number | string;
  label: string;
}

/**
 * 应用角色名
 */
export const appRoleMapping: IDict[] = [
  { value: EAppRole.personal, label: '个人' },
  { value: EAppRole.enterprise, label: '企业' },
  { value: EAppRole.gov, label: '政府' },
  { value: EAppRole.provider, label: '服务商' },
];

二、创建翻译方法

创建 src/provider/dict.ts，导出用于翻译的方法。

import { IDict } from '@/config/dict.mapping';

export const translate = (mapping: IDict[], val: number | string) => {
  const dict = mapping.find(dict => dict.value === val);
  return dict ? dict.label : val;
}

三、使用

3.1、遍历列表

一般用于将数据字典的映射完整的遍历出来。

import React from 'react';
import { appRoleMapping } from '@/config/dict.mapping';

export default () => {
  return {
    <ul>
      {
        appRoleMapping.map(role => (
          <li key={role.value}>{role.label}角色</li>
        ))
      }
    </ul>
  }
}

3.2、条件判断

import React, { useState } from 'react';
import { EAppRole } from '@/config/dict.enum';

export default () => {
  const [roleValue, setRoleValue] = useState<EAppRole>(EAppRole.personal);
  return (
    <>
      {
        EAppRole.personal === roleValue ? (
          <div>显示个人角色信息</div>
        ) : (
          <div>显示其它角色信息</div>
        )
      }
    </>
  )
}

在实际开发中，可以根据业务具体情况对 roleValue 赋值。

3.3、翻译

用于将后端返回的值翻译成文本显示，下方的 “2” 根据情况替换成后端返回的值。

import React from 'react';
import { appRoleMapping } from '@/config/dict.mapping';
import { translate } from '@/provider/dict';

export default () => {
  return {
    <div>类型：{translate(appRoleMapping, 2)}</div>
  }
}

四、实战效果