刪除重複代碼在JavaScript

我看到了很多我的代碼是純粹的複製，因爲我不知道該如何重構它採取不同的變量考慮進去。刪除重複代碼在JavaScript

這是裏面的代碼我的反應渲染方法：

  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具有相同的風格。也是我的，如果條件是很長，但我不能推測的方式來縮短下來

來源

2017-01-11 The worm

這個問題可能會更好地表述爲「在JSX中刪除代碼複製」，因爲這種東西在普通JavaScript中很平凡，但對於JSX的所有奇怪，你是對的，根本不明顯！ –

JSX看起來很奇怪，但這就是奇怪的結局。由於語法糖進入它的[非常簡單]（http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=true&presets=es2015-loose%2Creact%2Cstage-0%2Cstage-1%2Cstage-2%2Cstage- 3代碼=％3Cdiv％20className％3D％22cardFormatDH％22％20key％3D％7Bindex％7D％3E％7Bcard.rankKey％7D％7Bcard.suit％7D％3C％2Fdiv％3E），這是不能少在JSX瑣碎比在JavaScript中。 –

你可以寫一個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>;

來源

2017-01-11 19:19:48 SimpleJ

您可以創建一個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>; 
}

來源

2017-01-11 19:20:19

應該是'cardFormat $ {cls [card.suit]}' –

@IslamIbakaev：你是對的......修復。 –

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

來源

2017-01-11 20:47:07

刪除重複代碼在JavaScript

回答

相關問題