React下拉列表按品牌分组展示JSON数据的实现需求

问题描述 #

我获取到如下JSON数据：

{ 
   "cars": [
       {
          "make":"BMW",
          "model":"X3",
          "Lot":"Used"
       },
       {
          "make":"BMW",
          "model":"520",
          "Lot":"Used"
       },
       {
          "make":"Mercedes",
          "model":"550",
          "Lot":"New"
        },
        {
           "make":"Mercedes",
           "model":"C400",
            "Lot":"Used"
         }
     ]
}

需要在React下拉列表中按make（品牌）分组，展示为以下层级结构：

BMW
     Used
        X3
       520
Mercedes
      New
         550
      Used
         C400

当前下拉列表已填充数据，但每条记录以单行形式展示，需改为上述分组层级形式。

解决方案 #

1. 数据分组处理 #

先将扁平的数组转换为品牌->库存状态->车型的层级结构，使用Array.reduce实现：

const groupCars = (cars) => {
  return cars.reduce((acc, car) => {
    // 初始化品牌分组
    if (!acc[car.make]) {
      acc[car.make] = {};
    }
    // 初始化库存状态分组
    if (!acc[car.make][car.Lot]) {
      acc[car.make][car.Lot] = [];
    }
    // 添加车型到对应分组
    acc[car.make][car.Lot].push(car.model);
    return acc;
  }, {});
};

// 使用示例
const rawCars = {/* 你的原始JSON数据中的cars数组 */};
const groupedCars = groupCars(rawCars);

2. 渲染层级下拉列表 #

利用React的嵌套map遍历分组后的数据，结合HTML的optgroup标签实现层级分组：

import React from 'react';

const GroupedCarDropdown = ({ cars }) => {
  const groupedData = groupCars(cars);

  return (
    <select style={{ width: '240px', padding: '8px' }}>
      {/* 遍历品牌分组 */}
      {Object.entries(groupedData).map(([make, lotGroups]) => (
        <optgroup key={make} label={make}>
          {/* 遍历库存状态分组 */}
          {Object.entries(lotGroups).map(([lot, models]) => (
            <optgroup key={`${make}-${lot}`} label={`  ${lot}`}>
              {/* 遍历车型选项 */}
              {models.map(model => (
                <option key={`${make}-${lot}-${model}`} value={model}>
                  {'    '}{model}
                </option>
              ))}
            </optgroup>
          ))}
        </optgroup>
      ))}
    </select>
  );
};

// 组件调用示例
const App = () => {
  const carsData = { /* 你的原始JSON数据 */ };
  return <GroupedCarDropdown cars={carsData.cars} />;
};

export default App;

3. 自定义样式增强层级视觉效果（可选） #

如果默认optgroup的缩进不够清晰，可以添加自定义CSS：

/* 给二级分组添加缩进 */
select optgroup[label^="  "] {
  padding-left: 18px;
}
/* 给车型选项添加更深的缩进 */
select option {
  padding-left: 36px;
}

这样就能实现符合需求的分组层级下拉展示效果。

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