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 上使用切片，如下所示:

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