Удаление дублирования кода в 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/ч или в/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 & code =% 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

ответ

Смежные вопросы