我有工作代码,并且地图功能中的if语句有一点问题
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 if语句仅在地图Cashitem中具有状态可见时才渲染Cashitems isVisible已经具有isVisible:true或false我想做这样的事情
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 ... />) } }
代替括号,将其更改为花括号,并return在上述if else条件内使用关键字
return