我在渲染中添加了一个条件，突然停止显示。这是我使用的代码。
{this.state.sdata.map((sdata, i) =>
{i < 5 &&
<ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} />
}
)
}
我只想显示 sdata 中的 4 个项目。任何人请帮忙。
React js 中的条件渲染
IT技术
javascript
reactjs
react-jsx
2021-04-15 15:29:32
3个回答
{this.state.sdata.map((sdata, i) =>
(i < 4 &&
<ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} />
)
)
}
只需更换{}与()如上所示，并告诉你必须提供小于4，因为我从0开始4个数据。
您忘记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并创建一个array包含 5 个元素的子元素，然后使用map它。
像这样：
{this.state.sdata.slice(0,5).map((sdata, i) => {
return <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} />
})}
您还可以从这里尝试条件渲染的替代方案：React 中的条件渲染和 JSX 解决方案
基本上，该提议是创建一个“条件”组件，并像这样使用它：
<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在其中执行 a Array。
{
this.state.sdata.slice(0, 5).map((sdata, i) =>
<ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} />
);
}