ReactJS中实现文件路径列表转JSON层级结构的方法

需求说明 #

将给定的文件路径数组，转换为包含文件夹与文件层级关系的JSON结构，示例如下：

输入路径数组：

const paths = [
  "dir1/photos/mydir1.pdf",
  "dir1/photos/yourdir1.pdf"
];

期望输出JSON结构：

[
  {
    "type": "folder",
    "name": "dir1",
    "children": [
      {
        "type": "folder",
        "name": "photos",
        "children": [
          {
            "type": "file",
            "name": "mydir1.pdf"
          },
          {
            "type": "file",
            "name": "yourdir1.pdf"
          }
        ]
      }
    ]
  }
]

核心实现函数 #

以下是通用的JavaScript函数，可直接在React项目中使用：

function pathsToHierarchy(paths) {
  const root = [];
  // 用Map缓存已创建的文件夹节点，避免重复创建
  const nodeMap = new Map();

  paths.forEach(path => {
    const segments = path.split('/');
    let currentLevel = root;
    let currentPath = '';

    segments.forEach((segment, index) => {
      currentPath += (currentPath ? '/' : '') + segment;
      const isFile = index === segments.length - 1;

      // 处理文件节点
      if (isFile) {
        currentLevel.push({
          type: 'file',
          name: segment
        });
        return;
      }

      // 处理文件夹节点：检查是否已存在，不存在则创建
      let folderNode = nodeMap.get(currentPath);
      if (!folderNode) {
        folderNode = {
          type: 'folder',
          name: segment,
          children: []
        };
        nodeMap.set(currentPath, folderNode);
        currentLevel.push(folderNode);
      }

      // 进入下一级文件夹
      currentLevel = folderNode.children;
    });
  });

  return root;
}

函数说明 #

• 节点缓存：通过nodeMap记录每个文件夹的完整路径与对应节点，避免同一文件夹被重复创建，提升处理效率
• 路径分割：将每个路径按/拆分为片段，逐个层级处理
• 类型区分：通过片段索引判断是否为文件（最后一个片段），分别创建文件/文件夹节点
• 层级遍历：从根节点开始，逐层向下构建层级结构

在React组件中使用示例 #

可以将该函数与React状态结合，渲染出可视化的文件树：

import { useState, useEffect } from 'react';

// 引入上面的pathsToHierarchy函数

function FileTree() {
  const [fileHierarchy, setFileHierarchy] = useState([]);

  useEffect(() => {
    const paths = [
      "dir1/photos/mydir1.pdf",
      "dir1/photos/yourdir1.pdf"
    ];
    const hierarchy = pathsToHierarchy(paths);
    setFileHierarchy(hierarchy);
  }, []);

  // 递归渲染层级结构
  const renderTreeNodes = (nodes) => {
    return (
      <ul className="file-tree">
        {nodes.map((node, idx) => (
          <li key={idx}>
            <span>{node.type === 'folder' ? '📁' : '📄'} {node.name}</span>
            {/* 如果是文件夹，递归渲染子节点 */}
            {node.children && renderTreeNodes(node.children)}
          </li>
        ))}
      </ul>
    );
  };

  return (
    <div className="file-tree-container">
      <h3>文件层级</h3>
      {renderTreeNodes(fileHierarchy)}
    </div>
  );
}

export default FileTree;

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