React js 中的条件渲染答案

【问题标题】：Conditional Rendering in React jsReact js 中的条件渲染
【发布时间】：2017-11-22 19:11:08
【问题描述】：

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

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

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

【问题讨论】：

这能回答你的问题吗？ if-else statement inside jsx: ReactJS

标签： javascript reactjs react-jsx

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

这样写：

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

【讨论】：

【解决方案3】：

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

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

<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 个元素并在 Array 中执行 .map。

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

【讨论】：