在jsx和map中反应if语句 [英] react if statement in jsx and map

问题描述

我有可用的代码，并且map函数中的if语句在这里的代码没什么问题

i have working code and little problem with if statement in map function here is code

    const SortableItem = SortableElement(CashItem);
const SortableList = SortableContainer(({items}) => {
  return (
    <div>
      {items.map((cashitem, index) => (
        <SortableItem key={`item-${index}`} 
          index={index} 
          isPayed={cashitem.isPayed}
          date={cashitem.date}
          name={cashitem.name}
          realisticVal={cashitem.realisticVal}
          realisticBalance={cashitem.realisticBalance}
          optimisticBalance={cashitem.optimisticBalance}
          optimisticVal={cashitem.optimisticVal}
          changedName={(event) => this.nameChangedHandler(event, cashitem.id)} 
          isBlocked={(event) => this.handleChangeCheckbox(event, cashitem.id)} 
          delete={(event) => this.removeItem(event, cashitem.id)} 
          addNext={(event) => this.addNext(event, cashitem)} 
          realisticChange={(event) => this.realisticBalanceChangedHandler(event, cashitem.id)}  
          optimisticChange={(event) => this.optimisticBalanceChangedHandler(event, cashitem.id)}  
          dateChangedHandler={(event) => this.dateChangedHandler(event, cashitem.id)}
         />
      ))}
    </div>
  );
});

现在我想要chceck，如果仅在地图Cashitem中具有状态可见状态时才呈现语句，CashVisible isVisible已经拥有isVisible：是或否，我想做类似的事情

now i want chceck if statement to render only when in map cashitem has state is visible cashitems isVisible already have isVisible:true or false i want to do something like that

 const SortableItem = SortableElement(CashItem);
const SortableList = SortableContainer(({items}) => {
  return (
    <div>
      {items.map((cashitem, index) => (
        if(cashitem.isVisible===true){
          <SortableItem key={`item-${index}`} 
          index={index} 
          isPayed={cashitem.isPayed}
          date={cashitem.date}
          name={cashitem.name}
          realisticVal={cashitem.realisticVal}
          realisticBalance={cashitem.realisticBalance}
          optimisticBalance={cashitem.optimisticBalance}
          optimisticVal={cashitem.optimisticVal}
          changedName={(event) => this.nameChangedHandler(event, cashitem.id)} 
          isBlocked={(event) => this.handleChangeCheckbox(event, cashitem.id)} 
          delete={(event) => this.removeItem(event, cashitem.id)} 
          addNext={(event) => this.addNext(event, cashitem)} 
          realisticChange={(event) => this.realisticBalanceChangedHandler(event, cashitem.id)}  
          optimisticChange={(event) => this.optimisticBalanceChangedHandler(event, cashitem.id)}  
          dateChangedHandler={(event) => this.dateChangedHandler(event, cashitem.id)}
         />
        }

      ))}
    </div>
  );
});

推荐答案

{
  items.map((cashitem, index) => { //<== change it to curly braces

    return cashitem.isVisible && (<SortableItem key={`item-${index}`} //<== using the return keyword
      ... 
    />)

  }
}

不要使用括号，而是将其更改为花括号并使用返回关键字在上述if else条件内

Instead of using parenthesis, change it to curly braces and using a return keyword withint the if else condition as above

这篇关于在jsx和map中反应if语句的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！