如何重构这段代码消除重复，解决Lint报错问题？

嘿，这个问题我太熟悉了！你的switch语句里重复了大量相似的JSX结构，确实会触发Lint的重复代码警告，而且后续要加新状态也得重复写一遍<span>，维护起来麻烦。咱们可以通过抽离状态配置映射的方式来简化代码，彻底消除重复。

重构后的代码 #

const statusConfig = {
  [PRODUCT_STATUS.Sold]: {
    className: 'product',
    text: 'PRODUCT'
  },
  [PRODUCT_STATUS.OnStock]: {
    className: 'product success',
    text: 'ON STOCK'
  },
  [PRODUCT_STATUS.Expired]: {
    className: 'product error',
    text: 'EXPIRED'
  }
};

const formatter = (value) => {
  const config = statusConfig[value];
  if (config) {
    return <span className={config.className}>{config.text}</span>;
  }
  return 'STATUS DEFAULT';
};

为什么这么做？ #

• 消除重复代码：把每个状态对应的类名和文本统一存在statusConfig里，不用在每个case里重复写<span>标签
• 更易维护：以后要加新状态，只需要在statusConfig里加一条新配置就行，不用动formatter的核心逻辑
• 可读性更强：一眼就能看到所有状态对应的显示内容和样式，比嵌套的switch结构清晰多了

如果以后需要扩展更多逻辑（比如某个状态要加图标、特殊交互），直接在配置对象里加对应的属性就行，formatter函数不用大改，扩展性拉满～

内容的提问来源于stack exchange，提问作者Roxy'Pro