Question

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

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';
      }
}

谢谢大家

欢呼

Answer 1

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

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

Answer 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

还要快

Answer 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中。

如何在这里摆脱代码重复（棉绒错误）

3 个答案: