React中遍历数组生成横向动态表格遇问题，寻求解决方案

我太懂这种卡住的感觉了！明明觉得逻辑没毛病，结果生成的表格偏偏是纵向的——其实问题大多出在遍历的层级和HTML表格结构的对应关系上，咱们一步步捋清楚，很快就能搞定。

先搞清楚两种横向表格的场景 #

首先得明确你要的是哪种横向表格：

1. 简单横向：只有一行，数组的每个元素对应一个列（比如一行展示多个标签/选项）
2. 转置横向：原本的表头在顶部，现在把表头移到左侧，数据横向排列（比如把传统的“每行一条数据”变成“每列一条数据”）

场景1：简单单一行的横向表格 #

这种情况最常见，比如你有一个["苹果", "香蕉", "橙子"]的数组，想做成一行三列的表格。

错误写法（导致纵向表格）：

很多人会下意识地遍历数组生成多个<tr>（行），每个行里放一个<td>，结果就变成了一列多行的纵向表格：

// ❌ 错误：每个元素生成一行，变成纵向
<table border="1">
  <tbody>
    {fruits.map(fruit => (
      <tr key={fruit}>
        <td>{fruit}</td>
      </tr>
    ))}
  </tbody>
</table>

正确写法：

只需要创建一个<tr>行，然后在这一行里遍历数组生成多个<td>列：

import React from 'react';

const SimpleHorizontalTable = () => {
  const fruits = ["苹果", "香蕉", "橙子", "葡萄"];

  return (
    <table border="1">
      <tbody>
        {/* 只需要一个tr，内部遍历生成所有td */}
        <tr>
          {fruits.map((fruit, index) => (
            <td key={index}>{fruit}</td>
          ))}
        </tr>
      </tbody>
    </table>
  );
};

export default SimpleHorizontalTable;

场景2：转置后的横向表格（表头在左侧） #

如果你的数据是对象数组（比如用户列表），想把传统的“每行一个用户”变成“每列一个用户”，就需要先转置数据数组，再生成表格。

比如原始数据是：

const tableData = [
  { name: "张三", age: 25, city: "北京" },
  { name: "李四", age: 30, city: "上海" },
  { name: "王五", age: 28, city: "广州" }
];

步骤1：写一个数组转置函数

把原本的“行数据”转成“列数据”：

const transposeData = (data) => {
  // 拿到所有字段名作为转置后的表头
  const headers = Object.keys(data[0]);
  // 每个字段对应一行：[字段名, 第一个用户的字段值, 第二个用户的字段值...]
  return headers.map(header => [
    header,
    ...data.map(item => item[header])
  ]);
};

步骤2：用转置后的数据生成表格

现在遍历转置后的数组，每个元素就是一行，内部再遍历生成列：

import React from 'react';

const TransposedHorizontalTable = () => {
  const tableData = [
    { name: "张三", age: 25, city: "北京" },
    { name: "李四", age: 30, city: "上海" },
    { name: "王五", age: 28, city: "广州" }
  ];

  // 转置数据
  const transposedData = transposeData(tableData);

  return (
    <table border="1">
      <tbody>
        {transposedData.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {row.map((cell, cellIndex) => (
              <td key={cellIndex}>
                {/* 可以给表头单元格加个样式区分 */}
                {cellIndex === 0 ? <strong>{cell}</strong> : cell}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

// 转置函数
const transposeData = (data) => {
  const headers = Object.keys(data[0]);
  return headers.map(header => [
    header,
    ...data.map(item => item[header])
  ]);
};

export default TransposedHorizontalTable;

核心总结 #

• 如果是简单横向表格：一个<tr> + 遍历生成多个<td>
• 如果是转置横向表格：先转置数组，再按正常表格的方式遍历行和列

你可以根据自己的实际数据结构，对应上面的场景调整代码，应该就能得到你想要的横向表格了！

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