如何通过复用React组件将单个JSON数据展示为多列不同的表格

核心思路是通过props给复用的Datatable组件传递两个关键参数：数据源data，以及自定义的列配置columns，让组件根据配置动态渲染不同的表格。

步骤1：定义列配置（在App.js中） #

先为三个表格分别定义列配置数组，每个数组元素包含两个属性：

• key：对应JSON数据里的字段名（要和data.json里的字段完全一致）
• label：表格表头显示的文本

步骤2：修改App.js传递props #

把数据源和对应列配置作为props传给每个Datatable组件。

步骤3：修改Datatable.js接收并渲染配置 #

组件接收data和columns props，动态生成表头和表格内容。

完整代码示例 #

1. data.json（模拟你的数据结构）

[
  {
    "Name": "Alice Smith",
    "email": "alice@test.com",
    "number": "555-1234",
    "city": "Chicago",
    "Profession": "Frontend Developer"
  },
  {
    "Name": "Bob Johnson",
    "email": "bob@test.com",
    "number": "555-5678",
    "city": "Seattle",
    "Profession": "Backend Engineer"
  }
]

2. App.js

import { useState, useEffect } from 'react';
import Datatable from './Datatable';
import data from './data.json';

function App() {
  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    // 把JSON数据存入状态（你已经完成这一步，这里直接复用）
    setTableData(data);
  }, []);

  // 定义三个表格的列配置
  const table1Columns = [
    { key: 'Name', label: '姓名' },
    { key: 'email', label: '邮箱' },
    { key: 'number', label: '电话' }
  ];

  const table2Columns = [
    { key: 'email', label: '邮箱' },
    { key: 'city', label: '城市' },
    { key: 'number', label: '电话' }
  ];

  const table3Columns = [
    { key: 'Name', label: '姓名' },
    { key: 'Profession', label: '职业' },
    { key: 'number', label: '电话' },
    { key: 'city', label: '城市' }
  ];

  return (
    <div className="app">
      <h2>表格1：姓名、邮箱、电话</h2>
      <Datatable data={tableData} columns={table1Columns} />

      <h2>表格2：邮箱、城市、电话</h2>
      <Datatable data={tableData} columns={table2Columns} />

      <h2>表格3：姓名、职业、电话、城市</h2>
      <Datatable data={tableData} columns={table3Columns} />
    </div>
  );
}

export default App;

3. Datatable.js

function Datatable({ data, columns }) {
  return (
    <table border="1" style={{ borderCollapse: 'collapse', margin: '10px 0' }}>
      {/* 渲染表头 */}
      <thead>
        <tr>
          {columns.map(col => (
            <th key={col.key} style={{ padding: '8px' }}>
              {col.label}
            </th>
          ))}
        </tr>
      </thead>
      {/* 渲染表体 */}
      <tbody>
        {data.map((row, index) => (
          <tr key={index}>
            {columns.map(col => (
              <td key={col.key} style={{ padding: '8px', border: '1px solid #ccc' }}>
                {/* 用可选链处理字段不存在的情况，避免报错 */}
                {row[col.key] ?? '-'}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default Datatable;

关键说明 #

• 列配置的key必须和data.json里的字段名完全匹配，否则取不到值
• row[col.key] ?? '-'是为了防止某个数据项缺少字段时显示破折号，避免页面报错
• 你可以根据需求自定义表格样式，比如修改border、padding等

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