React from "react"; Нужно создать react компонент, который отображает древовидную структуру типа ampleFiles = [ { id: 1, name: 'src', children: [ { id: 2, name: 'components', children: [ { id: 3, name: 'Buttom.tsx', children: [] } ] }, { id: 4, name: 'index.ts', children: [] } ] }, { id: 5, name: 'README.md', children: [] } ] letStructure = () => { // использовать отображение структуры return ( <div> {/* Отобразить дерево */} </div> ) } export FileStructure;

Ниже пример 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 рендерит корневой список файлов.