在 React Data Grid 中实现动态列的生成与数据绑定

本教程详细介绍了如何在 `react-data-grid` 中处理复杂嵌套数据，以动态生成列并填充相应行数据。通过将 `devices` 数组中的设备名称转换为表格列标题，并将其值映射到对应的行单元格，我们解决了从非扁平化数据结构构建动态表格的常见挑战。核心在于对原始数据进行两次映射转换，以适配 `react-data-grid` 所需的列定义和行数据格式。

在 React Data Grid 中实现动态列的生成与数据绑定

在前端开发中，尤其是在构建数据密集型应用时，我们经常需要展示结构复杂的数据。react-data-grid 是一个功能强大的 React 组件，用于高效地渲染表格数据。然而，当数据源包含需要动态转换为列的嵌套结构时，例如一个数组中的对象属性，就需要进行额外的数据转换。本教程将指导您如何处理这类场景，实现动态列的定义和相应行数据的填充。

1. 数据结构概览

假设我们有如下的日志数据 dailyLogsData，其中包含基础日志信息和一个 devices 数组。每个 device 对象都有 device_name 和 device_value。我们的目标是将 device_name 作为表格的动态列，并将 device_value 作为对应行的数据。

const dailyLogsData = [
  {
    id: 1,
    date_created: "01/15/2023",
    time_updated: "15:53:05",
    usage_notes: "sample notes",
    maintenance_notes: "sample notes",
    devices: [
      { device_name: "Port Engine", device_value: "0125", device_id: 1 },
      { device_name: "Generator", device_value: "0252", device_id: 2 },
      { device_name: "Water Maker", device_value: "0321", device_id: 3 },
      { device_name: "Fuel Engine", device_value: "", device_id: 4 },
      { device_name: "Radiator", device_value: "", device_id: 5 },
    ],
  },
  {
    id: 2,
    date_created: "01/16/2023",
    time_updated: "15:53:05",
    usage_notes: "sample notes",
    maintenance_notes: "sample notes",
    devices: [
      { device_name: "Port Engine", device_value: "0125", device_id: 1 },
      { device_name: "Generator", device_value: "0252", device_id: 2 },
      { device_name: "Water Maker", device_value: "0321", device_id: 3 },
      { device_name: "Fuel Engine", device_value: "0321", device_id: 4 },
      { device_name: "Radiator", device_value: "0321", device_id: 5 },
    ],
  },
];

react-data-grid 要求 columns 数组中的 key 属性与 rows 数组中每个对象的属性名相匹配。因此，我们需要将 devices 数组中的 device_name 转换为列的 key，并确保 rows 中的每个对象也包含这些动态生成的属性。

2. 动态列的定义

首先，我们需要从 dailyLogsData 中提取 device_name 来生成动态列。通常，我们可以从第一个数据项的 devices 数组中获取所有可能的设备名称。

// 假设 dailyLogsData[0].devices 包含了所有可能的设备类型
const dynamicColumns = dailyLogsData[0].devices.map((item) => ({
  // 将设备名称中的空格移除，作为列的唯一键（key）
  key: item.device_name.replace(/ /g, ""),
  // 将设备名称转换为大写，作为列的显示名称（name）
  name: item.device_name.toUpperCase(),
}));

// 结合静态列和动态列
const columns = [
  { key: "id", name: "ID" },
  { key: "date_time", name: "DATE/TIME" },
  { key: "usage_notes", name: "USAGE NOTES" },
  { key: "maintenance_notes", name: "MAINTENANCE NOTES" },
  ...dynamicColumns, // 展开动态生成的列
];

在上述代码中：

网页制作与PHP语言应用

图书《网页制作与PHP语言应用》，由武汉大学出版社于2006出版，该书为普通高等院校网络传播系列教材之一，主要阐述了网页制作的基础知识与实践，以及PHP语言在网络传播中的应用。该书内容涉及：HTML基础知识、PHP的基本语法、PHP程序中的常用函数、数据库软件MySQL的基本操作、网页加密和身份验证、动态生成图像、MySQL与多媒体素材库的建设等。

下载

• 我们遍历了第一个日志项的 devices 数组，为每个设备创建了一个列定义。
• key 属性通过移除 device_name 中的空格来生成，确保其作为对象属性名的有效性。
• name 属性则直接使用 device_name 的大写形式作为列的显示标题。
• 最后，我们将这些动态生成的列与固定的静态列合并，形成完整的 columns 数组。

3. 行数据的转换与填充

这是实现动态列功能的核心步骤。react-data-grid 的 rows 属性期望一个对象数组，其中每个对象都包含所有列 key 对应的属性。这意味着我们需要将每个日志项的 devices 数组扁平化，并将其属性合并到主日志对象中。

const rows = dailyLogsData.map((item) => {
  // 初始化一个行对象，包含静态数据
  const row = {
    id: item.id,
    date_time: `${item.date_created} | ${item.time_updated}`,
    usage_notes: item.usage_notes,
    maintenance_notes: item.maintenance_notes,
  };

  // 遍历当前日志项的 devices 数组，动态添加设备值
  item.devices.forEach((device) => {
    // 使用设备名称（移除空格后）作为键，设备值作为属性值
    row[device.device_name.replace(/ /g, "")] = device.device_value;
  });

  return row;
});

在这个转换过程中：

1. 我们对 dailyLogsData 进行了 map 操作，为每个原始日志项生成一个新的行对象。
2. 在每个新的行对象 row 中，首先添加了 id、date_time 等静态属性。
3. 接着，我们对当前日志项的 devices 数组进行 forEach 遍历。
4. 对于每个 device，我们使用 device.device_name.replace(/ /g, "") 作为属性名（与列的 key 保持一致），并将 device.device_value 赋值给它。这样，PortEngine、Generator 等属性就会动态添加到 row 对象中。

4. 集成到 React Data Grid

完成 columns 和 rows 的准备后，就可以将它们传递给 DataGrid 组件了：

import DataGrid from "react-data-grid";
import "react-data-grid/lib/styles.css"; // 引入样式

function MyDynamicGrid() {
  // ... (dailyLogsData, columns, rows 的定义)

  return (
    

      
    
  );
}

export default MyDynamicGrid;

5. 注意事项与最佳实践

• 键值一致性: 确保用于生成列 key 的逻辑与填充行数据属性的逻辑完全一致（例如，都使用 replace(/ /g, "")）。任何不匹配都会导致数据无法正确显示。
• 数据源完整性: 动态列的生成通常依赖于数据源中的某个项（例如 dailyLogsData[0]）。请确保该项存在且包含所有预期的动态列信息。如果数据源可能为空或结构不一致，您可能需要更健壮的逻辑来收集所有唯一的 device_name。
• 性能考量: 对于非常大的数据集，在每次渲染时进行复杂的 map 和 forEach 转换可能会影响性能。在这种情况下，可以考虑使用 React.useMemo 来缓存 columns 和 rows，仅当 dailyLogsData 发生变化时才重新计算。
• 默认值处理: 如果某些 device_value 可能为空或 undefined，react-data-grid 默认会显示空白。如果需要显示特定的默认文本（如 "N/A"），可以在行数据转换时进行处理：

  row[device.device_name.replace(/ /g, "")] = device.device_value || "N/A";

• 类型安全 (TypeScript): 如果您在使用 TypeScript，为 columns 和 rows 定义准确的类型会增加代码的健壮性。对于动态列，您可能需要使用索引签名来定义行数据类型，例如 interface RowData { [key: string]: string | number; }。

总结

通过上述步骤，我们成功地将嵌套在数组中的数据动态地转换为 react-data-grid 的列和行。关键在于理解 react-data-grid 对 columns 和 rows 属性的期望格式，并运用 JavaScript 的 map 和 forEach 方法对原始数据进行适当的扁平化和转换。这种模式在处理复杂或不确定数据结构的表格展示时非常有用，能够大大提高组件的灵活性和复用性。