ReactJS中将迭代数据列表分两列渲染的实现方法

你可以直接通过数组拆分+独立列容器的方式实现需求，不需要在单次遍历里硬判断索引做样式hack，可维护性更好。

具体实现步骤 #

1. 拆分数组：用数组原生slice方法把原6项数组拆成两个长度为3的子数组，slice不会修改原数组，适合这类场景：

   // 前3项：索引0、1、2，对应第一列
   const firstColumn = dataservices.slice(0, 3)
   // 剩余项：从索引3到数组末尾，对应第二列
   const secondColumn = dataservices.slice(3)
   

2. 调整渲染结构：把原来单次遍历的逻辑改成两个独立的列容器，分别遍历两个子数组渲染卡片，修改后的完整JSX如下：

   <div className='section'>
     <p>Display Here</p>
     {/* 两列外层容器，负责横向排布 */}
     <div className="columns-wrap">
       {/* 第一列 */}
       <div className="column">
         {firstColumn.map((service, idx) => (
           <div className="skill-card" key={`col1-${idx}`}>
             <div className="skill-icon">{service.icon}</div>
             <label className="skill-name">{service.serviceName}</label>
           </div>
         ))}
       </div>
       {/* 第二列 */}
       <div className="column">
         {secondColumn.map((service, idx) => (
           <div className="skill-card" key={`col2-${idx}`}>
             <div className="skill-icon">{service.icon}</div>
             <label className="skill-name">{service.serviceName}</label>
           </div>
         ))}
       </div>
     </div>
   </div>
   

3. 补充布局样式：给外层容器加flex样式即可实现规整两列，间距可以按需调整：

   .columns-wrap {
     display: flex;
     gap: 2rem; /* 两列之间的横向间距 */
   }
   .column {
     flex: 1; /* 让两列自动等宽 */
     display: flex;
     flex-direction: column;
     gap: 1rem; /* 列内卡片的纵向间距 */
   }
   

注意事项 #

• 不要用单map遍历+索引判断加浮动/绝对定位的方式分栏，后期做响应式适配、调整卡片数量的时候维护成本极高，拆分子数组的方式逻辑更直白，改造成本低。
• 如果你的dataservices里的每一项有唯一标识（比如后端返回的id字段），建议把key替换成唯一标识，不要单纯用遍历索引，避免渲染异常。

内容的提问来源于stack exchange，提问作者sundeep