Dalam pembangunan web moden, mencipta sistem fail interaktif dan dinamik adalah keperluan biasa. Sama ada untuk mengurus dokumen, mengatur projek atau membina struktur data yang kompleks, mempunyai sistem fail yang mantap adalah penting. Dalam catatan blog ini, kami akan meneroka cara membina sistem fail rekursif dalam React, memfokuskan pada folder bersarang dan fail yang boleh ditambah, dinamakan semula atau dipadamkan.
Projek Sistem Fail Rekursif direka bentuk untuk mensimulasikan sistem pengurusan fail di mana pengguna boleh berinteraksi dengan folder dan fail secara dinamik. Ia menyokong ciri berikut:
Inti projek ialah struktur data rekursif yang mewakili sistem fail. Setiap folder boleh mengandungi folder atau fail lain dan setiap fail atau folder mempunyai sifat seperti id, nama dan kanak-kanak (untuk folder).
Berikut ialah struktur asas untuk folder:
const folder = { id: "1", name: "Documents", type: "folder", children: [ { id: "2", name: "Resume.pdf", type: "file" }, { id: "3", name: "CoverLetter.docx", type: "file" }, ], };
Projek ini merangkumi beberapa komponen utama untuk mengendalikan pelbagai aspek sistem fail:
// 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;
// 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;
Pengurusan negeri dikendalikan menggunakan cangkuk React seperti useState untuk mengurus data sistem fail. Tindakan seperti menambah, menamakan semula dan memadam item mengemas kini keadaan sewajarnya.
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 };
Mencipta sistem fail rekursif dalam React ialah cara yang berkesan untuk mengurus data hierarki dan menyediakan pengalaman pengguna yang dinamik. Dengan memanfaatkan seni bina berasaskan komponen dan pengurusan keadaan React, anda boleh membina sistem fail interaktif yang mengendalikan struktur bersarang kompleks dengan cekap.
Mengeluarkan pelaksanaan penuh pada GitHub dan terokai cara konsep ini boleh digunakan pada projek anda sendiri. Ikuti Github dan semak tapak web saya untuk mendapatkan maklumat lanjut!
Selamat mengekod!
??
Atas ialah kandungan terperinci Membina Sistem Fail Rekursif dengan React: A Deep Dive. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!