React js 中的条件渲染

Question

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

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

我只想显示 sdata 中的 4 个项目。任何人都请帮助。

Answer 1

您忘记了 return 来自 map 主体的元素，并且您需要 return null 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 2

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

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

Answer 3

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

基本上，建议是创建一个 "Conditional" 组件，并像这样使用它：

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

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

在你的例子中，应该这样实现：

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

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

中执行 .map

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

React js 中的条件渲染

Conditional Rendering in React js

javascript

reactjs

react-jsx