在JavaScript中删除代码重复

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

这是react render方法中的代码：

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

if（card.suit='D'| | card.suit='H'）{
返回{card.rankKey}{card.suit}；
}
else if（card.suit='C'| | card.suit==''S'）{
返回{card.rankKey}{card.suit}；
}

实际上，我想说的是：

无论是d/h还是c/s，返回完全相同的内容，只允许c/s具有相同的样式，而d/h具有相同的样式。

---

另外，我的if条件很长，但我无法找到缩短它的方法

您可以编写一个

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

函数getCardClassname（套装）{ 如果（card.suit='D'| card.suit=='H'）{ 返回“cardFormatDH”； } else if（card.suit='C'| | card.suit==''S'）{ 返回“cardFormatCS”； } } 返回{card.rankKey}{card.suit}；

---

您可以编写一个

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

函数getCardClassname（套装）{ 如果（card.suit='D'| card.suit=='H'）{ 返回“cardFormatDH”； } else if（card.suit='C'| | card.suit==''S'）{ 返回“cardFormatCS”； } } 返回{card.rankKey}{card.suit}；

---

您可以创建一个

套装->类名

地图：

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

if（cls[card.suit]）{
返回{card.rankKey}{card.suit}；
}

您可以创建一个

套装->类名

地图：

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

if（cls[card.suit]）{
返回{card.rankKey}{card.suit}；
}

//您可以在此处添加更多对
常量格式=['D'，'H'，['C'，'S']；
for（格式的let格式）{
if（格式包括（卡片套装））{
返回(
{card.rankKey}{card.suit}
);
}
} 

//您可以在此处添加更多对
常量格式=['D'，'H'，['C'，'S']；
for（格式的let格式）{
if（格式包括（卡片套装））{
返回(
{card.rankKey}{card.suit}
);
}
} 

这个问题最好用“删除JSX中的代码重复”来表述，因为这种东西在普通JavaScript中是微不足道的，但是JSX有这么多奇怪之处，你是对的，它一点也不明显！JSX看起来很奇怪，但这就是奇怪的结局。正如语法糖所说，这在JSX中并不比在JavaScript中简单。这个问题可以更好地表述为“在JSX中删除代码重复”，因为这种东西在普通JavaScript中很简单，但是JSX的所有奇怪之处，你是对的，它一点也不明显！JSX看起来很奇怪，但这就是奇怪的结局。正如语法糖所说，这在JSX中并不比在JavaScript中少。应该是

cardFormat${cls[card.suit]}

应该是

cardFormat${cls[card.suit]}