Как применять правила только для некоторых элементов в массиве

Question

У меня есть этот цикл в реакции:

<div> 
    {this.state.dealersDeck.map(function(card, index){ 
     return <div className="cardFormatDH" key={ index }> {card.rankKey}{card.suit} </div>; 
    }, this)} 
</div> 

Это идет через массив объектов, а затем делает их на экране. Это все хорошо, за исключением того, что я хотел бы отформатировать его, чтобы отображать содержимое только в определенных точках. т. е. я создаю блэкджек, и я не хочу, чтобы вторая карта дилеров была видна до конца.

Возможно, мне придется показывать больше кода, но мне было интересно, есть ли у map какой-то атрибут, который я мог бы использовать.

Answer 1

Вы можете использовать основные IF ... ELSE оператор внутри функцию карты, а также. Кроме того, вы можете написать больше бизнес-логики и добавить больше функциональности.

var cardsHTML = this.state.dealersDeck.map(function(card, index){ 

    if(condition...1){ 
     return <div className="cardFormatDH" key={ index }> {card.rankKey}{card.suit} </div> 
    } 

    if(condition...2){ 
     return <div></div> 
    } 
} 

Answer 2

Вы можете добавить булеву опору для каждой карты и сделать на его основе:

<div> 
    {this.state.dealersDeck.map(function(card, index){ 
     return { card.display && 
      <div className="cardFormatDH" key={ index }>{card.rankKey} {card.suit} </div> 
     } 
    }, this)} 
</div>