React中如何用map渲染含对象的二维数组并展示为表格

问题修正与核心思路 #

你之前的代码错误在于访问子数组时用了item.content，实际上dataItems的每个元素本身就是子数组，直接用item.map即可遍历。我们需要：

• 用Bootstrap 4标签页包裹每个子数组对应的表格
• 遍历二维数组，外层生成标签页导航与面板，内层将每个对象转为表格行

完整实现代码 #

import React from 'react';

// 子组件：渲染单一行数据
const TableRow = ({ data }) => (
  <tr>
    <td>{data.data1}</td>
    <td>{data.data2}</td>
    <td>{data.data3}</td>
    <td>{data.data4}</td>
  </tr>
);

// 父组件：实现标签页与表格渲染
const DataTabTable = ({ dataItems }) => {
  return (
    <div className="container mt-4">
      {/* Bootstrap标签导航 */}
      <ul className="nav nav-tabs" id="myTab" role="tablist">
        {dataItems.map((_, index) => (
          <li className="nav-item" key={`tab-nav-${index}`}>
            <a
              className={`nav-link ${index === 0 ? 'active' : ''}`}
              id={`tab-${index}-nav`}
              data-toggle="tab"
              href={`#tab-${index}`}
              role="tab"
              aria-controls={`tab-${index}`}
              aria-selected={index === 0}
            >
              标签页 {index + 1}
            </a>
          </li>
        ))}
      </ul>

      {/* 标签页内容面板 */}
      <div className="tab-content" id="myTabContent">
        {dataItems.map((subArray, index) => (
          <div
            className={`tab-pane fade ${index === 0 ? 'show active' : ''}`}
            id={`tab-${index}`}
            role="tabpanel"
            aria-labelledby={`tab-${index}-nav`}
            key={`tab-panel-${index}`}
          >
            <div className="s-table-container mt-3">
              <table className="s-table table table-bordered">
                <thead>
                  <tr>
                    <th>row1</th>
                    <th>row2</th>
                    <th>row3</th>
                    <th>row4</th>
                  </tr>
                </thead>
                <tbody>
                  {subArray.map((item, idx) => (
                    <TableRow key={`table-row-${index}-${idx}`} data={item} />
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// 使用示例（传入你的dataItems）
const App = () => {
  const dataItems = [
    // 你的数据数组...
  ];
  return <DataTabTable dataItems={dataItems} />;
};

export default App;

关键说明 #

• 标签页结构：遵循Bootstrap 4的标签页规范，导航与内容面板通过id和href关联，默认激活第一个标签页
• 数据遍历：
  • 外层dataItems.map：遍历二维数组的每个子数组，生成对应的标签页导航项和内容面板
  • 内层subArray.map：遍历子数组中的每个对象，通过TableRow组件渲染为表格行
• 组件拆分：将表格行抽为独立组件TableRow，让代码更易维护
• Key属性：所有map遍历的元素都添加了唯一key，避免React渲染警告

注意事项 #

• 确保已引入Bootstrap 4的CSS样式（可通过CDN或npm安装）
• 如果数据中有唯一标识（而非索引），建议用唯一标识作为key，提升渲染性能

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