Спроектировать React-компонент для отображения вложенной структуры файлов и папок: корректно отображает вложенную структуру, умеет скрывать и раскрывать содержимое папок, динамически запрашивает данные о содержимом папок при их раскрытии.

Ниже пример React-компонента, который рекурсивно отображает древовидную структуру файлов и папок:

import React from "react";

const sampleFiles = [
  {
    id: 1,
    name: 'src',
    children: [
      {
        id: 2, name: 'components', children: [
          { id: 3, name: 'Button.tsx', children: [] }
        ]
      },
      { id: 4, name: 'index.ts', children: [] }
    ]
  },
  {
    id: 5,
    name: 'README.md',
    children: []
  }
];

const FileNode = ({ node }) => {
  return (
    <li>
      {node.name}
      {node.children && node.children.length > 0 && (
        <ul>
          {node.children.map(child => (
            <FileNode key={child.id} node={child} />
          ))}
        </ul>
      )}
    </li>
  );
};

const FileStructure = () => {
  return (
    <div>
      <ul>
        {sampleFiles.map(file => (
          <FileNode key={file.id} node={file} />
        ))}
      </ul>
    </div>
  );
};

export default FileStructure;

Компонент FileNode отображает один узел (файл или папку). Если у узла есть дочерние элементы, они рекурсивно отображаются в вложенном списке. FileStructure рендерит корневой список файлов.