如何在这里摆脱代码重复（lint 错误）答案

【问题标题】：How to get rid of code repetition here (lint errors)如何在这里摆脱代码重复（lint 错误）
【发布时间】：2020-03-25 05:02:26
【问题描述】：

这是我的代码，我想摆脱它，因为它会导致我出现 lint 错误，但我不知道如何重构它以使其更清洁等等。

formatter: value => {
      switch (value) {
        case PRODUCT_STATUS.Sold:
          return (
            <span className="product">
              PRODUCT
            </span>
          );
        case PRODUCT_STATUS.OnStock:
          return (
            <span className="product success">
              ON STOCK
            </span>
          );
        case PRODUCT_STATUS.Expired:
          return (
            <span className="product error">
              EXPIRED
            </span>
          );
        default:
          return 'STATUS DEFAULT';
      }
}

谢谢大家

干杯

【问题讨论】：

什么是 lint 错误？
如果您不想解决错误但改进代码，我认为这个问题更适合codereview.stackexchange.com

标签： javascript html css reactjs ecmascript-6

【解决方案1】：

如果您创建一个函数来生成模板并在每种情况下调用它，那么我认为 linter 会很高兴：

function template(cssClasses, text) {
   return `
     <span class="${cssClasses}">
       ${text}
     </span>
  `;
}

【讨论】：

【解决方案2】：

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


formatter: value => {
  const details = config[value]
  return details ? <span className={details.className}>{details.text}</span>
        : 'STATUS DEFAULT'
}

比切换https://jsperf.com/if-switch-lookup-table/10还要快

【讨论】：

【解决方案3】：

如下所示。它与 Sam H. 已经发布的相同，但由于我也在这里写了它：

function render(css, status) {

 return (
      <span className={"product "+ css}>
      {status}
    </span>
  );
}

function formatter(value) {
    let result = null;
    switch (value) {
    case PRODUCT_STATUS.Sold:
      return render("sold", "SOLD");
    case PRODUCT_STATUS.OnStock:
      return render("sold", "ON STOCK");
    default:
      return render("", "DEFAULT");
  }
}

我还想知道默认值是否应该是非元素？在本例中，它也将被包裹在 span 中。

【讨论】：