Question

我有可用的代码，并且地图功能中的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>
  );
});

现在，我希望仅当在地图上的Cashitem中具有状态可见的语句时才显示语句，如果要显示，则CashVisible 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

您不会在if语句中返回组件。

select a.year, a.begin, a.end, count(*)
from meter_values b 
inner join period a on b.date between a.begin and a.end  and b.status = 6
group by a.year, a.begin, a.end

但是，由于要过滤列表，为什么不使用Array.filter方法？

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

Answer 2

RegisterDate

不使用括号，而是将其更改为花括号，并在上述if else条件中使用{ items.map((cashitem, index) => { //<== change it to curly braces if(cashitem.isVisible===true) { return <SortableItem key={`item-${index}`} //<== using the return keyword ... /> } } }关键字

Answer 3

由多个表达式组成的箭头函数需要：

围绕它的括号
显式return语句

因此：

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

Answer 4

创建一个处理if / else语句并返回jsx / html构建器的函数，然后在jsx render（）函数中调用它。

检查this solution /作者：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>)
}

在jsx和map中反应if语句

4 个答案: