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

你可以为每张卡添加一个布尔道具并根据它进行渲染：

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

Answer 2

您也可以在map函数中使用基本的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>
    }
}

如何将规则仅应用于数组中的某些元素

2 个答案: