如何在ReactJS中实现动态Material UI地址信息表格

核心思路 #

• 用字段配置数组统一管理表头文本和对应数据字段，实现配置化复用
• 编写分组工具函数，将配置按每2个元素拆分（对应表格一行）
• 循环渲染分组后的配置，动态生成表格行和单元格，彻底替代硬编码

第一步：定义配置与分组工具 #

先统一维护字段映射关系，同时封装通用分组函数：

// 地址字段配置：[{显示名称, 数据字段key}]
const addressFieldConfig = [
  { label: 'Address Line1', key: 'addressLine1Desc' },
  { label: 'Address Line2', key: 'addressLine2Desc' },
  { label: 'Address Line3', key: 'addressLine3Desc' },
  { label: 'Address Line4', key: 'addressLine4Desc' },
  { label: 'Country Code', key: 'countryCode' },
  { label: 'Country Name', key: 'countryName' }, // 修正原代码中字段引用错误
  { label: 'CityName', key: 'cityName' },
  { label: 'PostalCode', key: 'postalCode' },
];

// 通用分组函数：将数组按指定大小拆分
const chunkArray = (array, chunkSize) => {
  const chunks = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    chunks.push(array.slice(i, i + chunkSize));
  }
  return chunks;
};

// 生成地址字段分组（每2个一组对应一行）
const addressFieldGroups = chunkArray(addressFieldConfig, 2);

第二步：修改组件渲染逻辑 #

替换原硬编码的<TableBody>部分，用循环动态生成内容：

<Card sx={{ minWidth: 275 }}>
  <CardContent>
    <Typography variant="h5" component="div" className="cardTitle">
      <MailOutlineIcon />&nbsp;Primary Address
    </Typography>
    
    <TableContainer component={Paper} sx={{ width: 400, margin: 'auto', display: 'Block', boxShadow: 'none' }}>
      <Table sx={{ minWidth: 400 }} aria-label="customized table">
        <TableBody>
          {/* 循环渲染每一行 */}
          {addressFieldGroups.map((group, rowIndex) => (
            <TableRow key={rowIndex} className='tableRow'>
              {/* 循环渲染当前行的两个单元格 */}
              {group.map((field, colIndex) => {
                const address = clientAddressDetails[0];
                const value = clientAddressDetails.length ? address[field.key] : '';
                return (
                  <TableCell key={colIndex} component="th" scope="row" className="tableCell">
                    <span className="cellHeader">{field.label}</span><br />
                    <span className='cellValue'>{value || '&nbsp;&nbsp;'}</span>
                  </TableCell>
                );
              })}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  </CardContent>
</Card>

适配其他同类数据 #

如果要展示客户联系方式、基本信息等其他同类结构数据，只需新建对应配置数组，复用分组和渲染逻辑即可：

// 示例：联系方式配置
const contactFieldConfig = [
  { label: 'Phone Number', key: 'phoneNumber' },
  { label: 'Email', key: 'email' },
  { label: 'Fax', key: 'fax' },
  { label: 'Website', key: 'website' },
];

const contactFieldGroups = chunkArray(contactFieldConfig, 2);
// 直接复用上述表格渲染逻辑即可生成联系方式表格

注意事项 #

1. 修正了原代码中Country Name错误引用countryCode的问题
2. 空值处理简化为value || '  '，保持与原逻辑一致
3. 若配置数组是动态生成的，建议用字段key作为渲染的key而非索引，避免重渲染问题

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