javascript - 如何在 React JSX 中遍历数组中的某些项目

Question

我的问题是关于如何部分迭代 React JSX 中的数组。我不想调用 .map 并遍历 profile.categories 中的所有项目，而只想显示数组中的前五个项目。我目前有以下代码：

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

Answer 1

直接在 profile.categories 上使用 slice，如下所示：

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

Answer 2

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

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

您还可以添加方法来获取组件中的一些类别计数：

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

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