React js中的条件渲染

小编典典

React js中的条件渲染

reactjs

我在渲染中添加了一个条件，突然它停止显示。这是我正在使用的代码。

 {this.state.sdata.map((sdata, i) => 
   {i < 5 && 
    <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> 
   }
  )
 }

我只想显示sdata中的4个项目。有人请帮忙。

阅读 219

2020-07-22

共1个答案

小编典典

您忘记return了mapbody中的元素，以及 i > = 5*之后的return null所有条目所需的元素。array *

这样写：

{this.state.sdata.map((sdata, i) => {
       if(i < 5) 
          return <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> 
       return null;
   })
}

但我建议您使用for loop而不是map仅创建5个元素。

如果要使用，map则首先使用
slice
并创建array5个元素的子元素，然后map在其上使用。

像这样：

{this.state.sdata.slice(0,5).map((sdata, i) => {
     return <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> 
})}

2020-07-22