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

Posted 2023-02-21

【中文标题】如何在 React JSX 中循环遍历数组中的某些项目 [重复]

【英文标题】：How to loop through some items in an array in React JSX [duplicate]

【发布时间】：2020-03-18 05:59:24

【问题描述】：

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

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

【参考方案1】：

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

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

【参考方案2】：

只需将slice 与地图一起使用：

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

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

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


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