Javascript (React.js) - 重构一个 switch-case答案

【问题标题】：Javascript (React.js) - Refactor a switch-caseJavascript (React.js) - 重构一个 switch-case
【发布时间】：2021-01-28 08:15:26
【问题描述】：

我正在创建一个选项卡导航器，它监听我的数据库并呈现 5 个不同的图标，其中一个带有徽章。

当前，我正在使用 switch-case 进行此操作，以避免使用不同的道具返回相同的组件 5 次。但事实是，它看起来并不专业。有什么设计模式可以重构这段代码吗？

      let iconName;
      let iconType = "material-community"; // app default icons from material-community
      let badgeNumber;

      switch (route.name) {
        case "Home":
          iconName = "home";
          break;

        case "Interactions":
          iconName = "heart";
          badgeNumber = props.notifications;
          break;

        case "Camera":
          iconName = "camera";
          break;

        case "Search":
          iconName = "search";
          iconType = "material";
          break;

        case "Profile":
          iconName = "person";
          iconType = "material";
          break;
      }

      return (
        <BadgedIcon
          number={badgeNumber} 
          name={iconName}
          type={iconType}
          color={color}
          size={24}
          badgeStyle={styles.interactionsBadge}
        />
      );

【问题讨论】：

标签： javascript reactjs design-patterns coding-style refactoring

【解决方案1】：

我会这样做：

const iconMap = {
  Home: {
    iconName: 'home',
    iconType: 'material',
    badgeNumber: props.notifcations
  },
  /// All your other route names:
}

return (
<BadgedIcon
number = { iconMap[router.name].badgeNumber }
name = {iconMap[router.name].iconName}
// All your other props:

【讨论】：

【解决方案2】：

你可以使用这样的设计

 const iconName = {
    Home: 'home',
    Interactions: 'heart',
    Camera: 'camera',
    Search: 'search',
    Profile: 'person'
  };

function geticonName(route.name) {
  return iconName[route.name];
}

您可以查看以下链接

https://dev.to/nyagarcia/the-art-of-refactoring-5-tips-to-write-better-code-12if https://github.com/KarlPurk/javascript-refactoring/blob/master/patterns/javascript/replace-switch-with-object-literal.md

【讨论】：