如何基于对象数组通用创建React表格行与单元格

我明白你现在的痛点——硬编码表格列的方式完全没法复用，遇到嵌套对象更是头疼。咱们来一步步把它改成真正通用的React表格组件，不管是平级字段还是嵌套对象都能轻松处理。

1. 先写一个处理嵌套字段的工具函数 #

这个函数能根据字段路径（比如"TableType.max_occupancy"）从对象里取出对应的值，解决嵌套对象的遍历问题：

const getNestedValue = (obj, path) => {
  return path.split('.').reduce((current, key) => {
    return current && current[key] !== undefined ? current[key] : '';
  }, obj);
};

简单说：把路径按.分割成数组，然后用reduce逐层遍历对象，如果中间某一层不存在就返回空字符串，避免页面报错。

2. 编写通用表格组件 #

这里用Material-UI的组件来示例（和你当前代码里的TableRow、TableCell对应），你可以根据自己用的UI库调整：

import React from 'react';
import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';

const GenericTable = ({ data, columns, classes }) => {
  return (
    <Table>
      <TableHead>
        <TableRow>
          {columns.map((column) => (
            <TableCell key={column.field} className={classes.tableCell}>
              {column.title}
            </TableCell>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>
        {data.map((row, rowIndex) => (
          <TableRow key={rowIndex}>
            {columns.map((column) => {
              // 如果列配置有自定义render函数，优先用它实现特殊逻辑
              if (column.render) {
                return (
                  <TableCell key={column.field} className={classes.tableCell}>
                    {column.render(row)}
                  </TableCell>
                );
              }
              // 否则用工具函数自动取嵌套字段的值
              const value = getNestedValue(row, column.field);
              return (
                <TableCell key={column.field} className={classes.tableCell}>
                  {value}
                </TableCell>
              );
            })}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};

export default GenericTable;

3. 如何在视图中复用这个组件 #

现在你可以在任何需要表格的地方直接调用，只需要定义对应的列配置和数据即可：

import GenericTable from './GenericTable';
import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
  tableCell: {
    // 这里放你的自定义样式
  }
});

const MyView = () => {
  const classes = useStyles();
  
  // 定义列配置：标题、字段路径（支持嵌套）、可选自定义渲染逻辑
  const columns = [
    { title: '编号', field: 'number' },
    { title: '最大容纳人数', field: 'TableType.max_occupancy' },
    // 示例：自定义渲染操作列，比如加编辑按钮
    { 
      title: '操作', 
      render: (row) => (
        <button onClick={() => handleEdit(row)}>编辑</button>
      )
    }
  ];

  // 你的表格数据（包含嵌套对象）
  const tableData = [
    { number: 'T001', TableType: { max_occupancy: 10 } },
    { number: 'T002', TableType: { max_occupancy: 20 } }
  ];

  return <GenericTable data={tableData} columns={columns} classes={classes} />;
};

export default MyView;

为什么这个方案好用？ #

• 完全复用：不管哪个视图需要表格，只要传对应的columns和data就行，不用重复写表格结构代码
• 支持嵌套：通过getNestedValue工具函数轻松处理多层嵌套对象，不用手动写prop.TableType.max_occupancy这种硬编码逻辑
• 灵活扩展：如果某列需要特殊渲染（比如日期格式化、图标、操作按钮），只需要在列配置里加render函数就行
• 易于维护：后续要加列、改列顺序或者修改字段，只需要调整columns数组，不用动表格组件的核心代码

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