如何在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 => (&nbsp; &nbsp;<div&nbsp; &nbsp; &nbsp;className="profile-categories"&nbsp; &nbsp; &nbsp;style={{ float: "left" }}&nbsp; &nbsp;>&nbsp; &nbsp; &nbsp;{category}&nbsp; &nbsp;</div>&nbsp;))}&nbsp;</div>

Answer 2

只需将切片与地图一起使用：profile.categories.slice(0, 5).map(...)您还可以添加方法来获取组件中的一些类别计数：getFirst(count) {&nbsp; return profile.categories.slice(0, count);}// and then in render:this.getFirst(5).map(...)