删除JavaScript

Question

我注意到很多代码都是重复的纯粹是因为我不知道如何在考虑变量的情况下以不同的方式重构代码。

这是我的反应渲染方法中的代码：

          if (card.suit == 'D' || card.suit == 'H'){
            return <div className="cardFormatDH" key={ index }> {card.rankKey}{card.suit} </div>;
          }
          else if (card.suit == 'C' || card.suit == 'S'){
            return <div className="cardFormatCS" key={ index }> {card.rankKey}{card.suit} </div>;
          }

实际上，我想说的是：

返回完全相同的东西，无论是d / h还是c / s，只是允许c / s具有相同的样式和d / h以具有相同的样式。 我的if条件很长但是我无法找到缩短它的方法

Answer 1

您可以创建suit -> className地图：

const cls = {
  D: 'DH',
  H: 'DH',
  C: 'CS',
  S: 'CS',
};

并在表格中查找套装，使用该值作为类名称的一部分：

if (cls[card.suit]) {
  return <div className={`cardFormat${cls[card.suit]}`} key={ index }> {card.rankKey}{card.suit} </div>;
}

Answer 2

您可以编写getCardClassname函数：

function getCardClassname(suit) {
  if (card.suit == 'D' || card.suit == 'H'){
    return "cardFormatDH";
  }
  else if (card.suit == 'C' || card.suit == 'S'){
    return "cardFormatCS";
  }
}

return <div className={getCardClassname(card.suit)} key={ index }> {card.rankKey}{card.suit} </div>;

Answer 3

  // you can add more pairs here 
  const formats = [ ['D', 'H'], ['C', 'S'] ]; 

  for(let format of formats) {
    if(format.includes(card.suit)) {
      return (
        <div className=`cardFormat${format.join('')}` key={ index }> 
          {card.rankKey}{card.suit} 
        </div>
      );
    }
  }