如何用React创建TreeView导航？需转换指定JSON数据结构

1. 数据转换逻辑 #

由于无法修改原始数据的输出格式，我们需要在组件内部将扁平的JSON数据转换为type -> year -> make的层级结构，同时自动去重重复条目。

const transformDataToTree = (rawData) => {
  const treeMap = {};

  rawData.forEach(item => {
    const { type, year, make } = item;
    // 初始化type层级
    if (!treeMap[type]) treeMap[type] = {};
    // 初始化year层级，用Set去重重复的make
    if (!treeMap[type][year]) treeMap[type][year] = new Set();
    // 按示例统一转小写（可根据需求调整大小写规则）
    treeMap[type][year].add(make.toLowerCase());
  });

  // 转换为组件可渲染的树形数组结构
  return Object.entries(treeMap).map(([type, yearGroup]) => ({
    label: type,
    children: Object.entries(yearGroup).map(([year, makes]) => ({
      label: year,
      children: Array.from(makes).map(make => ({ label: make }))
    }))
  }));
};

2. React TreeView组件实现 #

通过递归组件渲染树形结构，自动处理嵌套层级：

import React from 'react';

// 递归渲染单个树节点
const TreeItem = ({ node }) => {
  const hasChildren = node.children?.length > 0;
  return (
    <div style={{ marginLeft: '24px' }}>
      <div>{node.label}</div>
      {hasChildren && (
        <div>
          {node.children.map((child, idx) => (
            <TreeItem key={`${node.label}-${idx}`} node={child} />
          ))}
        </div>
      )}
    </div>
  );
};

// 主TreeView组件
const TreeView = ({ data }) => {
  const treeData = transformDataToTree(data);
  return (
    <div>
      {treeData.map((rootNode, idx) => (
        <TreeItem key={`root-${idx}`} node={rootNode} />
      ))}
    </div>
  );
};

// 组件使用示例
const App = () => {
  const rawData = [
    { "make": "BMW", "year": "2020", "type": "used" },
    { "make": "BMW", "year": "2022", "type": "new" },
    { "make": "lexus", "year": "2022", "type": "used" },
    { "make": "lexus", "year": "2022", "type": "used" }
  ];

  return <TreeView data={rawData} />;
};

export default App;

说明 #

• 样式方面：示例用内联样式实现层级缩进，实际项目中可以替换为CSS类优化样式，还能添加展开/折叠交互（通过state控制节点显示/隐藏）。
• 大小写规则：如果需要严格匹配示例中的大小写差异（如new下保留BMW大写、used下转小写），可在转换函数中针对type字段做分支处理。

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