Визуализация дерева каталогов с учетом вложенного объекта JSON | Javascript | Реагировать | Интервью Вопрос

Создать данные каталога,

const data = {
    name: 'root',
    type: 'folder',
    children: [
      {
        name: 'folder1',
        type: 'folder',
        children: [
          { name: 'file1.txt', type: 'file' },
          { name: 'file2.txt', type: 'file' },
        ],
      },
      {
        name: 'folder2',
        type: 'folder',
        children: [
          {
            name: 'subfolder',
            type: 'folder',
            children: [{ name: 'file3.txt', type: 'file' }],
          },
          { name: 'file4.txt', type: 'file' },
        ],
      },
      { name: 'file5.txt', type: 'file' },
    ],
  };

Создать дерево рендеринга с помощью JSON

Функция renderTree рекурсивно генерирует структуру HTML для дерева каталогов. Он использует неупорядоченный список (<ul>) для представления каждого уровня структуры каталогов и элементов списка (<li>) для папок и файлов.

// HTML --> parentElement
<div id="tree"></div>

function renderTree(data, parentElement) {
  const ul = document.createElement('ul');
  parentElement.appendChild(ul);

  data.forEach((item) => {
    const li = document.createElement('li');
    const span = document.createElement('span');
    span.textContent = item.name;
    span.className = item.type;
    li.appendChild(span);
    ul.appendChild(li);

    if (item.children && item.children.length > 0) {
      renderTree(item.children, li);
    }
  });
}

const treeContainer = document.getElementById('tree');
renderTree([data], treeContainer);

Реализация в Javascript,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Directory Tree Renderer</title>
    <style>
      ul {
        list-style-type: none;
        margin-left: 20px;
        padding: 0;
      }

      li {
        margin-top: 5px;
      }

      .folder {
        color: #0074d9;
      }

      .file {
        color: #2ecc40;
      }
    </style>
  </head>
  <body>
    <div id="tree"></div>
    <script>
      const data = {
        name: 'root',
        type: 'folder',
        children: [
          {
            name: 'folder1',
            type: 'folder',
            children: [
              { name: 'file1.txt', type: 'file' },
              { name: 'file2.txt', type: 'file' },
            ],
          },
          {
            name: 'folder2',
            type: 'folder',
            children: [
              {
                name: 'subfolder',
                type: 'folder',
                children: [{ name: 'file3.txt', type: 'file' }],
              },
              { name: 'file4.txt', type: 'file' },
            ],
          },
          { name: 'file5.txt', type: 'file' },
        ],
      };

      function renderTree(data, parentElement) {
        const ul = document.createElement('ul');
        parentElement.appendChild(ul);

        data.forEach((item) => {
          const li = document.createElement('li');
          const span = document.createElement('span');
          span.textContent = item.name;
          span.className = item.type;
          li.appendChild(span);
          ul.appendChild(li);

          if (item.children && item.children.length > 0) {
            renderTree(item.children, li);
          }
        });
      }

      const treeContainer = document.getElementById('tree');
      renderTree([data], treeContainer);
    </script>
  </body>
</html>

Реализация В React

import React from 'react';

const data = {
  name: 'root',
  type: 'folder',
  children: [
    {
      name: 'folder1',
      type: 'folder',
      children: [
        { name: 'file1.txt', type: 'file' },
        { name: 'file2.txt', type: 'file' }
      ]
    },
    {
      name: 'folder2',
      type: 'folder',
      children: [
        { name: 'subfolder', type: 'folder', children: [{ name: 'file3.txt', type: 'file' }] },
        { name: 'file4.txt', type: 'file' }
      ]
    },
    { name: 'file5.txt', type: 'file' }
  ]
};

const TreeNode = ({ node }) => (
  <li>
    <span className={node.type}>{node.name}</span>
    {node.children && node.children.length > 0 && (
      <ul>
        {node.children.map(child => (
          <TreeNode key={child.name} node={child} />
        ))}
      </ul>
    )}
  </li>
);

const DirectoryTree = () => (
  <div>
    <ul>
      <TreeNode node={data} />
    </ul>
  </div>
);

export default DirectoryTree;

Спасибо за прочтение

Я знаю, что всегда есть что улучшить. Пожалуйста, поделитесь своими мыслями