Javascript jsx和map中的react if语句

我有工作代码，映射函数中的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>
  );
});

const SortableItem=SortableElement（现金项目）；
const SortableList=SortableContainer（（{items}）=>{
返回(
{items.map（（现金项目，索引）=>(
this.nameChangedHandler（事件，cashitem.id）}
isBlocked={（事件）=>this.handleChangeCheckbox（事件，cashitem.id）}
delete={（事件）=>this.removietem（事件，cashitem.id）}
addNext={（事件）=>this.addNext（事件，现金项目）}
realisticChange={（事件）=>this.realisticBalanceChangedHandler（事件，cashitem.id）}
optimisticChange={（事件）=>this.optimisticBalanceChangedHandler（事件，cashitem.id）}
dateChangedHandler={（事件）=>this.dateChangedHandler（事件，cashitem.id）}
/>
))}
);
});

现在我想要chceck if语句只在映射中cashitem has state为visible时呈现cashitems isVisible have 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>
  );
});

const SortableItem=SortableElement（现金项目）；
const SortableList=SortableContainer（（{items}）=>{
返回(
{items.map（（现金项目，索引）=>(
if（cashitem.isVisible==true）{
this.nameChangedHandler（事件，cashitem.id）}
isBlocked={（事件）=>this.handleChangeCheckbox（事件，cashitem.id）}
delete={（事件）=>this.removietem（事件，cashitem.id）}
addNext={（事件）=>this.addNext（事件，现金项目）}
realisticChange={（事件）=>this.realisticBalanceChangedHandler（事件，cashitem.id）}
optimisticChange={（事件）=>this.optimisticBalanceChangedHandler（事件，cashitem.id）}
dateChangedHandler={（事件）=>this.dateChangedHandler（事件，cashitem.id）}
/>
}
))}
);
});

包含多个表达式的箭头函数需要：

• 它周围的支架
• 显式返回语句

因此：

（现金项目，索引）=>{
如果（条件）{
返回
}
}

{
map（（cashitem，index）=>{/您没有在if语句中返回组件

{items.map((cashitem, index) => {
    if(cashitem.isVisible){
        return <SortableItem key={`item-${index}`} ...otherProps/>
    }
})}

{items.map（（现金项目，索引）=>{
如果（cashitem.isVisible）{
返回
}
})}

但是，既然您正在筛选列表，为什么不使用该方法呢

{items.filter（cashItem=>cashItem.isVisible）.map（（cashItem，index）=>(
)}
创建一个函数来处理if/else语句并返回jsx/html生成器，然后在jsx render（）函数中调用它

检查/作者：

renderSkillSection:function（）{
如果（this.state.challengeChoices.length<0）{
返回this.state.challengeChoices.map（（para2，i）=>
)
}
否则{
返回你好世界
}   
},
render:function（）{
返回(
{this.renderSkillSection（）}
)
}
在地图功能中使用它？@PiotrBieszczad:如果您认为它回答了您的问题，请将其标记为答案，作为其他面临相同情况的人的参考
{
  items.map((cashitem, index) => { //<== change it to curly braces

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

  }
}

{items.map((cashitem, index) => {
    if(cashitem.isVisible){
        return <SortableItem key={`item-${index}`} ...otherProps/>
    }
})}

{items.filter(cashItem => cashItem.isVisible).map((cashitem, index) => (
    <SortableItem key={`item-${index}`} ...otherProps/>
)}

renderSkillSection: function(){
  if (this.state.challengeChoices.length < 0) {                               
    return this.state.challengeChoices.map((para2, i) =>
         <ChallengeSkill key={i} {...para2} callback={this.madeSelection} />)
  }
  else {
    return <div>Hello world</div>
  }   
},

render: function(){
 return (<div className="skillSection">
  {this.renderSkillSection()}   
 </div>)
}