使用TypeScript开发的React垂直进度条组件如何优化条件逻辑？

条件判断优化方案 #

你原有代码的冗余点主要是重复返回结构完全一致的View组件，同时存在可以合并的同结果条件分支，优化后可以在完全保留原有业务逻辑的前提下大幅精简代码，优化后的实现如下：

const ProgressBarVertical: React.FC<ProgressProps> = ({
  Levelorder,
  currentLevel,
}) => {
  // 集中计算进度条样式，逻辑聚合易维护
  const getBarStyle = () => {
    if (Levelorder === 0) {
      return currentLevel === 0 ? styles.progressIncompleteFirst : styles.progressCompleteFirst
    }
    // 原逻辑中Levelorder >= currentLevel时均返回未完成样式，直接合并判断
    return Levelorder < currentLevel ? styles.progressComplete : styles.progressIncomplete
  }

  return <View style={getBarStyle()} />
}

核心优化点：

• 移除了重复的JSX模板，后续如果要给进度条加通用属性（比如测试ID、无障碍标识）只需要修改一次View标签，维护成本更低
• 合并了冗余分支：原代码中Levelorder > currentLevel和Levelorder === currentLevel的返回结果完全相同，直接用反向判断即可覆盖，减少了2次多余的条件判断
• 删掉了不必要的switch语句，用更简洁的三目运算符即可覆盖首节点的判断逻辑
• 样式计算逻辑和渲染逻辑分层，后续修改样式规则不需要改动渲染结构，可读性更高

如果追求更短的代码，也可以直接把样式判断行内写，适合逻辑不会再扩展的场景：

const ProgressBarVertical: React.FC<ProgressProps> = ({ Levelorder, currentLevel }) => (
  <View 
    style={
      Levelorder === 0 
        ? currentLevel === 0 ? styles.progressIncompleteFirst : styles.progressCompleteFirst
        : Levelorder < currentLevel ? styles.progressComplete : styles.progressIncomplete
    } 
  />
)

可选的规范优化：如果符合你的团队命名规范，可以把props的Levelorder改为小驼峰levelOrder，更符合TypeScript社区的通用变量命名习惯。

内容的提问来源于stack exchange，提问作者Berserker