JavaScriptでコードの重複を削除する

Question

私は、変数を考慮して別の方法でリファクタリングする方法がわからないので、私のコードがかなり複製されていることに気付きました。

私は、メソッドのレンダリングに反応内でこれがコードです：/それはD/HまたはCであるかどうかまったく同じこと

リターン：私が言いたいものを効果的に

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

のようなものですsでは、c/sが同じスタイルを持ち、d/hが同じスタイルを持つことを許可します。 はまた私の状態が非常に長い場合、私はあなたがgetCardClassname機能を書くことができ

Answer 1

をそれを短縮する方法を理解カント：

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

：

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 2

あなたはsuit -> classNameマップを作成することができます値をクラス名の一部として使用してテーブル内のスーツを検索します。

if (cls[card.suit]) { 
    return <div className={`cardFormat${cls[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> 
    ); 
    } 
    }