如何在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(...)