React を使用した再帰的ファイルシステムの構築: 詳細-jsチュートリアル-php.cn

React を使用した再帰的ファイルシステムの構築: 詳細

Barbara Streisand

リリース： 2024-09-29 14:19:30

オリジナル

313 人が閲覧しました

Building a Recursive File System with React: A Deep Dive

はじめに: React で再帰的ファイルシステムを作成する

現代の Web 開発では、インタラクティブで動的なファイルシステムを作成することが一般的な要件です。ドキュメントの管理、プロジェクトの整理、複雑なデータ構造の構築のいずれにおいても、堅牢なファイルシステムを持つことが重要です。このブログ投稿では、追加、名前変更、または削除できるネストされたフォルダーとファイルに焦点を当てて、React で再帰的ファイルシステムを構築する方法を検討します。

プロジェクト概要

Recursive File System プロジェクトは、ユーザーがフォルダーやファイルを動的に操作できるファイル管理システムをシミュレートするように設計されています。次の機能をサポートしています:

新しいフォルダーとファイルの追加: 既存のフォルダー内に新しいフォルダーとファイルを作成します。
アイテムの名前変更: フォルダーとファイルの名前を変更します。
アイテムの削除: ファイルシステムからフォルダーとファイルを削除します。
ネストされた構造: ネストされたフォルダーとファイルを処理して、階層ビューを作成します。

主な機能と実装

1. 再帰的なデータ構造

プロジェクトの中核は、ファイルシステムを表す再帰的データ構造です。各フォルダーには他のフォルダーまたはファイルを含めることができ、各ファイルまたはフォルダーには ID、名前、子 (フォルダー用) などのプロパティがあります。

フォルダーの基本構造は次のとおりです:

const folder = {
  id: "1",
  name: "Documents",
  type: "folder",
  children: [
    { id: "2", name: "Resume.pdf", type: "file" },
    { id: "3", name: "CoverLetter.docx", type: "file" },
  ],
};

ログイン後にコピー

2. コンポーネント

プロジェクトには、ファイルシステムのさまざまな側面を処理するためのいくつかの主要なコンポーネントが含まれています。

FileExplorer: ファイルシステム全体を表示し、フォルダーとファイルのレンダリングを処理します。

// src/components/FileExplorer.js
import React, { useState } from "react";
import Folder from "./Folder";
import File from "./File";

const FileExplorer = () => {
  const [files, setFiles] = useState(initialData); // initialData is your recursive data structure

  const addItem = (parentId, type) => {
    // Logic to add a folder or file
  };

  const renameItem = (id, newName) => {
    // Logic to rename a folder or file
  };

  const deleteItem = (id) => {
    // Logic to delete a folder or file
  };

  return (
    <div>
      {files.map((file) =>
        file.type === "folder" ? (
          <Folder
            key={file.id}
            folder={file}
            onAdd={addItem}
            onRename={renameItem}
            onDelete={deleteItem}
          />
        ) : (
          <File
            key={file.id}
            file={file}
            onRename={renameItem}
            onDelete={deleteItem}
          />
        )
      )}
    </div>
  );
};

export default FileExplorer;

ログイン後にコピー

Folder: フォルダーをレンダリングし、ネストされたアイテムを処理します。

// src/components/Folder.js
import React from "react";
import FileExplorer from "./FileExplorer";

const Folder = ({ folder, onAdd, onRename, onDelete }) => {
  return (
    <div>
      <h3>{folder.name}</h3>
      <button onClick={() => onAdd(folder.id, "folder")}>Add Folder</button>
      <button onClick={() => onAdd(folder.id, "file")}>Add File</button>
      <button onClick={() => onRename(folder.id, "New Name")}>Rename</button>
      <button onClick={() => onDelete(folder.id)}>Delete</button>
      {folder.children && <FileExplorer files={folder.children} />}
    </div>
  );
};

export default Folder;

ログイン後にコピー

ファイル: 名前変更と削除のオプションを使用して個々のファイルをレンダリングします。

// src/components/File.js
import React from "react";

const File = ({ file, onRename, onDelete }) => {
  return (
    <div>
      <p>{file.name}</p>
      <button onClick={() => onRename(file.id, "New Name")}>Rename</button>
      <button onClick={() => onDelete(file.id)}>Delete</button>
    </div>
  );
};

export default File;

ログイン後にコピー

3. 状態とアクションの処理

状態管理は、ファイルシステムデータを管理する useState などの React フックを使用して処理されます。項目の追加、名前変更、削除などのアクションにより、それに応じて状態が更新されます。

const [files, setFiles] = useState(initialData);

const addItem = (parentId, type) => {
  // Logic to add a new item to the file system
};

const renameItem = (id, newName) => {
  // Logic to rename an existing item
};

const deleteItem = (id) => {
  // Logic to delete an item
};

ログイン後にコピー