如何在React中遍历并并排渲染两个列表？

这里针对你给出的等长列表场景，提供两种实用的实现方式：

方法一：Flex布局 + 索引遍历 #

利用两个列表长度一致的特点，通过遍历其中一个列表的索引匹配另一个列表的元素，配合Flex布局快速实现左右对齐。

import React from 'react';
import './TwoLists.css';

const TwoLists = () => {
  const list1 = ['A', 'B', 'C'];
  const list2 = ['X', 'Y', 'Z'];

  return (
    <div className="lists-container">
      {list1.map((item, index) => (
        <div key={index} className="list-row">
          <span className="left-item">{item}</span>
          <span className="right-item">{list2[index]}</span>
        </div>
      ))}
    </div>
  );
};

export default TwoLists;

对应的CSS（TwoLists.css）：

.lists-container {
  width: 220px; /* 可按需调整宽度 */
  padding: 10px;
  border: 1px solid #e0e0e0; /* 可选，方便观察布局范围 */
}

.list-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.left-item {
  text-align: left;
}

.right-item {
  text-align: right;
}

方法二：Grid布局 #

如果偏好二维布局的特性，用Grid也能轻松实现需求：

import React from 'react';
import './TwoListsGrid.css';

const TwoListsGrid = () => {
  const list1 = ['A', 'B', 'C'];
  const list2 = ['X', 'Y', 'Z'];

  return (
    <div className="grid-container">
      {list1.map((item, index) => (
        <React.Fragment key={index}>
          <span className="grid-left">{item}</span>
          <span className="grid-right">{list2[index]}</span>
        </React.Fragment>
      ))}
    </div>
  );
};

export default TwoListsGrid;

对应的CSS：

.grid-container {
  width: 220px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.grid-left {
  text-align: left;
}

.grid-right {
  text-align: right;
}

边界情况处理 #

如果两个列表长度不一致，可通过以下方式兼容：

// 取两个列表的最大长度，补空元素适配
const maxLength = Math.max(list1.length, list2.length);
return (
  <div className="lists-container">
    {Array.from({ length: maxLength }).map((_, index) => (
      <div key={index} className="list-row">
        <span className="left-item">{list1[index] || ''}</span>
        <span className="right-item">{list2[index] || ''}</span>
      </div>
    ))}
  </div>
);

内容的提问来源于stack exchange，提问作者Gopikrishna K S