如何在React JSX[duplicate]中循环遍历数组中的某些项

Question

我的问题是关于如何在React JSX中部分迭代数组。而不是打电话。映射并迭代配置文件中的所有项目。类别，我只想显示数组中的前五项。我目前拥有以下代码：

<div className="categories">
   {profile.categories.map(category => (
       <div
         className="profile-categories"
         style={{ float: "left" }}
       >
         {category}
       </div>
     ))}
 </div>

Answer 1

只需将切片与贴图一起使用：

profile.categories.slice(0, 5).map(...)

此外，您还可以添加获取组件中某些类别计数的方法：

getFirst(count) {
  return profile.categories.slice(0, count);
}

// and then in render:
this.getFirst(5).map(...)

Answer 2

直接在profile.categories上使用切片，像这样：

<div className="categories">
{profile.categories.slice(0, 5).map(category => (
   <div
     className="profile-categories"
     style={{ float: "left" }}
   >
     {category}
   </div>
 ))}
 </div>