Question

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

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

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

Answer 1

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

只需将{}替换为()，如上所示，并显示4个数据，您必须提供少于4的数据，因为我从0开始。

Answer 2

您忘记了return来自map正文的元素，以及return null对 i＆gt; =之后array的所有条目的忘记5

像这样写：

{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并创建5个元素的子array，然后使用map。

像这样：

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

Answer 3

您还可以从此处尝试条件渲染的替代方法：Conditional Rendering in React and the JSX solution

基本上，建议是创建一个＆＃34; Conditional＆＃34;组件，并使用它：

<Conditional if={this.state.something}>
  <div>hello!</div>
<Conditional>

因此，<div>hello!</div>仅在this.state.something为真时才会呈现。

在您的示例中，应以这种方式实现：

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

无论如何，只显示5个元素的最佳方法是：基本上，只从数组中获取前5个元素，并在.map中执行Array。

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

React js中的条件渲染

3 个答案: