我该如何改进呢？使用打字稿答案

【问题标题】：How can I improve this? using typescript我该如何改进呢？使用打字稿
【发布时间】：2021-11-04 19:53:39
【问题描述】：

const ProgressBarVertical: React.FC<ProgressProps> = ({
  Levelorder,
  currentLevel,
 }) => {
  if (Levelorder === 0) {
       switch (currentLevel) {
         case 0:
           return <View style={styles.progressIncompleteFirst} />
         default:
           return <View style={styles.progressCompleteFirst} />
       }
  } else if (Levelorder > currentLevel) {
     return <View style={styles.progressIncomplete} />
  } else if (Levelorder < currentLevel) {
     return <View style={styles.progressComplete} />
  } else {
     return <View style={styles.progressIncomplete} />
  }

我很着急，我做了这样的条件，但我觉得我仍然可以改善这一点。谁能告诉我怎么做？

【问题讨论】：

重新发布到 CodeReview.SE
你不需要那么多else if's - 只需if() return; 就足够了。

标签： typescript react-native

【解决方案1】：

与任何重构一样，寻找重复的事物并尝试使它们不再重复。我注意到的第一件事是您多次渲染<View />，只是使用了不同的style 属性。那么如果你渲染一次呢？

const ProgressBarVertical: React.FC<ProgressProps> = ({
  Levelorder,
  currentLevel,
}) => {
    return <View style={getStyle(Levelorder, currentLevel)} />
}

现在您可以实现getStyle。请注意，通过使用提前返回，您可以将条件花括号的数量减少很多。

function getStyle(Levelorder: number, currentLevel: number): ViewStyle {
    if (Levelorder === 0) {
        return currentLevel === 0 ?
            styles.progressIncompleteFirst :
            styles.progressCompleteFirst
    }

    if (Levelorder < currentLevel) return styles.progressComplete
    
    return styles.progressIncomplete
}

第一个 if 处理 Levelorder 为零的特殊情况。第二个if 处理已完成的情况，如果前两个返回均未执行，则最后一个仅返回 only 其他选项（等于或大于）。

【讨论】：