在 jsx 和 map 中響應 if 語句

Question

我有工作代碼，並且 map 函數中的 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>
  );
});

現在我想檢查 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>
  );
});

Answer 1

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

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

不要使用括號，而是將其更改為花括號，並在 if else 條件中使用return關鍵字，如上所述

Answer 2

您沒有在 if 語句中返回組件。

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

但是，既然您正在過濾列表，為什么不使用Array.filter方法呢？

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

Answer 3

由多個表達式組成的箭頭函數需要：

• 圍繞它的大括號
• 顯式返回語句

因此：

(cashitem, index) => {
    if (condition) {
        return <Component />
    }
}

Answer 4

創建一個處理 if/else 語句並返回 jsx/html 構建器的函數，然后在 jsx render() 函數中調用它。

檢查此解決方案/作者： Blair Anderson

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>)
}