使用 React Data Grid 实现动态列与数据映射-js教程-PHP中文网

使用 React Data Grid 实现动态列与数据映射

聖光之護

发布： 2025-10-30 11:11:00

原创

270人浏览过

使用 React Data Grid 实现动态列与数据映射

本教程详细阐述如何在 `react-data-grid` 中实现动态列的生成与数据映射。通过将嵌套数组中的设备信息转换为独立的列，并精确地将对应值填充到行数据中，我们能够灵活地展示复杂结构的数据，从而优化数据表的呈现和管理。

动态生成 React Data Grid 列与数据映射教程

在前端应用中，尤其是数据展示密集型场景，我们经常需要使用表格组件来呈现数据。react-data-grid 是一个功能强大且高度可定制的 React 表格组件。然而，当数据结构包含嵌套数组，并且我们希望将嵌套数组中的每个元素作为表格的动态列展示时，就需要进行一些数据转换和映射。本教程将指导您如何实现这一目标。

1. 理解原始数据结构

首先，我们来看一个典型的原始数据结构，其中包含日志信息和嵌套的设备列表：

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 },
    ],
  },
];

登录后复制

我们的目标是将 devices 数组中的 device_name 转换为表格的列标题，并将对应的 device_value 填充到每行的相应列中。

2. 定义表格列结构

react-data-grid 需要一个 columns 数组来定义表格的每一列。这个数组通常包含静态列和动态列。

2.1 生成动态列

动态列可以从 dailyLogsData 中的第一个条目（假设所有日志条目的设备列表结构相同）的 devices 数组中提取。为了确保 key 属性的有效性，我们通常会对 device_name 进行处理，例如移除空格。

// 从第一个数据项的devices数组中提取动态列
const dynamicColumns = dailyLogsData[0].devices.map((item) => ({
  key: item.device_name.replace(/ /g, ""), // 移除空格作为key
  name: item.device_name.toUpperCase(), // 列标题转换为大写
  // 可以添加其他列属性，如 width, resizable 等
}));

登录后复制

2.2 组合静态与动态列

将预定义的静态列与生成的动态列组合起来，形成完整的 columns 数组：

序列猴子开放平台

具有长序列、多模态、单模型、大数据等特点的超大规模语言模型

查看详情

const staticColumns = [
  { key: "id", name: "ID", width: 60 },
  { key: "date_time", name: "DATE/TIME", width: 180 },
  { key: "usage_notes", name: "USAGE NOTES", width: 200 },
  { key: "maintenance_notes", name: "MAINTENANCE NOTES", width: 200 },
];

const allColumns = [...staticColumns, ...dynamicColumns];

登录后复制

3. 转换行数据结构

这是实现动态列展示的关键步骤。react-data-grid 的 rows 属性需要一个对象数组，其中每个对象的键（key）必须与 columns 数组中定义的 key 匹配。这意味着我们需要将 devices 数组中的 device_name 和 device_value 扁平化到每个日志条目的顶层对象中。

我们可以通过 map 结合 forEach 来实现这一转换：

const transformedRows = 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,
  };

  // 遍历设备的数组，将每个设备的名称作为key，值作为value添加到行对象中
  item.devices.forEach((device) => {
    // 确保这里的key与dynamicColumns中生成的key一致
    row[device.device_name.replace(/ /g, "")] = device.device_value;
  });

  return row;
});

登录后复制

经过上述转换后，transformedRows 数组中的每个对象将具有以下结构（以第一个数据项为例）：

{
  id: 1,
  date_time: "01/15/2023 | 15:53:05",
  usage_notes: "sample notes",
  maintenance_notes: "sample notes",
  PortEngine: "0125",
  Generator: "0252",
  WaterMaker: "0321",
  FuelEngine: "",
  Radiator: ""
}

登录后复制

4. 整合到 React Data Grid 组件

现在，我们已经准备好了 columns 和 rows 数据，可以将其传递给 DataGrid 组件进行渲染。

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

function MyDynamicDataGrid() {
  // 原始数据
  const dailyLogsData = [
    // ... (如上文所示的 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 },
      ],
    },
  ];

  // 1. 生成动态列
  const dynamicColumns = dailyLogsData[0].devices.map((item) => ({
    key: item.device_name.replace(/ /g, ""),
    name: item.device_name.toUpperCase(),
    width: 120, // 可选：设置动态列宽度
    resizable: true, // 可选：允许调整列宽
  }));

  // 2. 定义静态列并与动态列组合
  const staticColumns = [
    { key: "id", name: "ID", width: 60, resizable: true },
    { key: "date_time", name: "DATE/TIME", width: 180, resizable: true },
    { key: "usage_notes", name: "USAGE NOTES", width: 200, resizable: true },
    { key: "maintenance_notes", name: "MAINTENANCE NOTES", width: 200, resizable: true },
  ];
  const allColumns = [...staticColumns, ...dynamicColumns];

  // 3. 转换行数据
  const transformedRows = 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,
    };
    item.devices.forEach((device) => {
      row[device.device_name.replace(/ /g, "")] = device.device_value;
    });
    return row;
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        columns={allColumns}
        rows={transformedRows}
        // 其他可选属性，如 defaultColumnOptions, rowHeight 等
      />
    </div>
  );
}

export default MyDynamicDataGrid;

登录后复制

5. 注意事项与最佳实践

键名一致性： 确保在生成动态列的 key 时，使用的逻辑与在转换行数据时为设备值设置属性名（key）的逻辑完全一致。例如，都使用 device.device_name.replace(/ /g, "")。
数据一致性： 假定 dailyLogsData 中所有条目的 devices 数组结构（设备名称和顺序）基本一致。如果不同日志条目的设备列表差异很大，您可能需要更复杂的逻辑来处理列的合并或缺失值。
性能考量： 对于非常庞大的数据集，频繁的 map 和 forEach 操作可能会影响性能。在这种情况下，可以考虑使用 useMemo 或 useCallback 来缓存计算结果，避免不必要的重新渲染。
空值处理： 如果 device_value 可能为 null 或 undefined，确保您的渲染逻辑能够妥善处理这些情况，例如显示为空字符串或特定占位符。
错误处理： 考虑 dailyLogsData 或 devices 数组为空的情况，确保代码不会因此而崩溃。例如，在生成 dynamicColumns 之前检查 dailyLogsData[0] 是否存在。

总结

通过本教程，您学习了如何利用 JavaScript 的 map 和 forEach 方法，将嵌套数据结构扁平化，并为 react-data-grid 生成动态列和对应的行数据。这种方法使得 react-data-grid 能够灵活地展示来自复杂数据源的信息，极大地提高了数据表格的适应性和可读性。掌握这种数据转换技巧，对于构建高效且用户友好的数据密集型 React 应用至关重要。

以上就是使用 React Data Grid 实现动态列与数据映射的详细内容，更多请关注php中文网其它相关文章！