0

requiero de su ayuda o explicación para poder crear la siguiente estructura de carpetas (adjunto en comentario adicional la imagen de lo que se espera lograr) utilizando un render recursivo en react.js, teniendo en cuenta el siguiente objeto. Lo ideal sería poder ir navegando en los diferentes niveles de profundidad dándole clic a cada carpeta y así, poder visualizar los archivos que contiene.

const folders = [
  {
    idFolder: 1,
    name: "folder-1",
    idParentFolder: null,
    childrenFolder: [2, 3],
    users: ["[email protected]", "[email protected]"],
    files: ["file1.txt", "file2.pdf", "file3.docx"]
  },
  {
    idFolder: 2,
    name: "folder-2",
    idParentFolder: 1,
    childrenFolder: [4],
    users: ["[email protected]", "[email protected]"],
    files: ["file4.txt", "file5.pdf", "file6.docx"]
  },
  {
    idFolder: 3,
    name: "folder-3",
    idParentFolder: 1,
    childrenFolder: [5, 6],
    users: ["[email protected]", "[email protected]"],
    files: ["file7.txt", "file8.pdf", "file9.docx"]
  },
  {
    idFolder: 4,
    name: "folder-4",
    idParentFolder: 2,
    childrenFolder: [],
    users: ["[email protected]", "[email protected]"],
    files: ["file10.txt", "file11.pdf", "file12.docx"]
  },
  {
    idFolder: 5,
    name: "folder-5",
    idParentFolder: 3,
    childrenFolder: [7, 8],
    users: ["[email protected]", "[email protected]"],
    files: ["file13.txt", "file14.pdf", "file15.docx"]
  },
  {
    idFolder: 6,
    name: "folder-6",
    idParentFolder: 3,
    childrenFolder: [],
    users: ["[email protected]", "[email protected]"],
    files: ["file16.txt", "file17.pdf", "file18.docx"]
  },
  {
    idFolder: 7,
    name: "folder-7",
    idParentFolder: 5,
    childrenFolder: [9],
    users: ["[email protected]", "[email protected]"],
    files: ["file19.txt", "file20.pdf", "file21.docx"]
  },
  {
    idFolder: 8,
    name: "folder-8",
    idParentFolder: 5,
    childrenFolder: [],
    users: ["[email protected]", "[email protected]"],
    files: ["file22.txt", "file23.pdf", "file24.docx"]
  },
  {
    idFolder: 9,
    name: "folder-9",
    idParentFolder: 7,
    childrenFolder: [10],
    users: ["[email protected]", "[email protected]"],
    files: ["file25.txt", "file26.pdf", "file27.docx"]
  },
  {
    idFolder: 10,
    name: "folder-10",
    idParentFolder: 9,
    childrenFolder: [],
    users: ["[email protected]", "[email protected]"],
    files: ["file28.txt", "file29.pdf", "file30.docx"]
  }
];

Gracias. Es un proyecto que requiero hacer, pero es la primera vez que investigo acerca de recursividad.

introducir la descripción de la imagen aquí

1 respuesta 1

0

Para crear una estructura de carpetas (árbol de directorios) de manera recursiva en React con los datos que brindas, lo mejor es crear un componente de carpeta recursivo que se encargue de renderizar cada carpeta y sus archivos si los tiene, y que llame a sí mismo para renderizar cada subcarpeta.

Aquí te dejo un ejemplo de cómo podrías hacerlo:

function Folder({ folder }) {
  const [showChildren, setShowChildren] = React.useState(false);

  const toggleChildren = React.useCallback(() => {
    setShowChildren(!showChildren);
  }, [showChildren]);

  return (
    <div className="folder">
      <div className="folder-header" onClick={toggleChildren}>
        <i className="material-icons">
          {showChildren ? 'folder_open' : 'folder'}
        </i>
        {folder.name}
      </div>
      {showChildren && (
        <div className="folder-children">
          {folder.childrenFolder.map((childFolderId) => (
            <Folder
              key={childFolderId}
              folder={folders.find((f) => f.idFolder === childFolderId)}
            />
          ))}
          {folder.files.map((file) => (
            <div className="file" key={file}>
              <i className="material-icons">insert_drive_file</i>
              <span className="file-name">{file}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function FolderTree({ folders }) {
  return (
    <div className="folder-tree">
      {folders
        .filter((folder) => folder.idParentFolder === null)
        .map((rootFolder) => (
          <Folder key={rootFolder.idFolder} folder={rootFolder} />
        ))}
    </div>
  );
}

ReactDOM.render(<FolderTree folders={folders} />, document.getElementById('root'));

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.